move frontend stuff to its own directory
This commit is contained in:
28
frontend/eslint.config.js
Normal file
28
frontend/eslint.config.js
Normal file
@@ -0,0 +1,28 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import tseslint from 'typescript-eslint'
|
||||
|
||||
export default tseslint.config(
|
||||
{ ignores: ['dist'] },
|
||||
{
|
||||
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
},
|
||||
plugins: {
|
||||
'react-hooks': reactHooks,
|
||||
'react-refresh': reactRefresh,
|
||||
},
|
||||
rules: {
|
||||
...reactHooks.configs.recommended.rules,
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
},
|
||||
)
|
||||
13
frontend/index.html
Normal file
13
frontend/index.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>cutt</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
42
frontend/package.json
Normal file
42
frontend/package.json
Normal file
@@ -0,0 +1,42 @@
|
||||
{
|
||||
"name": "cutt",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"bulma": "^1.0.4",
|
||||
"jwt-decode": "^4.0.0",
|
||||
"react": "^19.2.3",
|
||||
"react-dom": "^19.2.3",
|
||||
"react-sortablejs": "^6.1.4",
|
||||
"reagraph": "^4.30.7",
|
||||
"sortablejs": "^1.15.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.39.2",
|
||||
"@types/node": "^25.0.3",
|
||||
"@types/react": "^19.2.7",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@types/sortablejs": "^1.15.9",
|
||||
"@vitejs/plugin-react": "^5.1.2",
|
||||
"eslint": "^9.39.2",
|
||||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
"eslint-plugin-react-refresh": "^0.4.26",
|
||||
"globals": "^16.5.0",
|
||||
"react-router": "^7.10.1",
|
||||
"typescript": "~5.9.3",
|
||||
"typescript-eslint": "^8.50.0",
|
||||
"vite": "^7.3.0"
|
||||
},
|
||||
"prettier": {
|
||||
"trailingComma": "es5",
|
||||
"tabWidth": 2,
|
||||
"semi": true
|
||||
}
|
||||
}
|
||||
734
frontend/src/App.css
Normal file
734
frontend/src/App.css
Normal file
@@ -0,0 +1,734 @@
|
||||
body {
|
||||
background-color: aliceblue;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
color: black;
|
||||
text-align: center;
|
||||
overflow-wrap: anywhere;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 24px;
|
||||
font-size: x-small;
|
||||
}
|
||||
|
||||
.fixed-footer {
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
dialog {
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
/*=========Network Controls=========*/
|
||||
|
||||
.infobutton {
|
||||
position: fixed;
|
||||
right: 8px;
|
||||
bottom: 8px;
|
||||
padding: 0.4em;
|
||||
border-radius: 1em;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
font-size: medium;
|
||||
margin-bottom: 16px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
z-index: 9;
|
||||
position: absolute;
|
||||
color: black;
|
||||
top: 1vh;
|
||||
right: 0px;
|
||||
padding: 8px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
|
||||
.control {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
max-width: 240px;
|
||||
margin: 0px;
|
||||
background-color: #f0f8ffdd;
|
||||
|
||||
.slider,
|
||||
span {
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
#three-slider {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: auto;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* The switch - the box around the slider */
|
||||
.switch {
|
||||
position: relative;
|
||||
width: 48px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
/* Hide default HTML checkbox */
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* The slider */
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
border-radius: 34px;
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: #2196f3;
|
||||
}
|
||||
|
||||
input:focus + .slider {
|
||||
box-shadow: 0 0 1px #2196f3;
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
-webkit-transform: translateX(24px);
|
||||
-ms-transform: translateX(24px);
|
||||
transform: translateX(24px);
|
||||
}
|
||||
|
||||
.grey {
|
||||
opacity: 66%;
|
||||
}
|
||||
|
||||
.hint {
|
||||
position: absolute;
|
||||
font-size: 80%;
|
||||
padding: 8px;
|
||||
top: auto;
|
||||
left: 4px;
|
||||
bottom: auto;
|
||||
right: 4px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
padding: 0.2em 16px;
|
||||
margin-top: 0.25em;
|
||||
margin-bottom: 0.25em;
|
||||
border-radius: 1em;
|
||||
color: black;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.stack {
|
||||
display: flex;
|
||||
|
||||
button,
|
||||
img {
|
||||
padding: 0px 1em 4px 1em;
|
||||
margin: 3px auto;
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
width: min(96vw, 900px);
|
||||
}
|
||||
|
||||
.dragbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 32px;
|
||||
height: 92%;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
border-width: 3px;
|
||||
border-style: solid;
|
||||
border-radius: 16px;
|
||||
|
||||
h4 {
|
||||
margin: 4px;
|
||||
}
|
||||
&.one {
|
||||
max-width: min(96%, 768px);
|
||||
margin: 4px auto;
|
||||
}
|
||||
|
||||
padding: 4px;
|
||||
margin: 4px 0.5%;
|
||||
}
|
||||
|
||||
.reservoir {
|
||||
display: flex;
|
||||
flex-direction: unset;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.item {
|
||||
cursor: pointer;
|
||||
font-size: medium;
|
||||
border: 2px solid;
|
||||
border-radius: 1em;
|
||||
margin: 3px auto;
|
||||
padding: 5px 0.8em;
|
||||
}
|
||||
|
||||
.extra-margin {
|
||||
padding: 0px 8px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 4px;
|
||||
font-weight: bold;
|
||||
color: aliceblue;
|
||||
background-color: black;
|
||||
border-radius: 1.2em;
|
||||
z-index: 1;
|
||||
|
||||
&:hover {
|
||||
opacity: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
#control-panel {
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
margin: auto;
|
||||
gap: 16px;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
transition: display 1s ease-out 0s;
|
||||
}
|
||||
|
||||
#control-panel.opened {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.control {
|
||||
display: flex;
|
||||
border-radius: 16px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px solid #404040;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
#three-slider input {
|
||||
margin: 4px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
#control-panel {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.control {
|
||||
font-size: 80%;
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
#control-panel {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.networkroute {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.submit_text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.submit {
|
||||
position: fixed;
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
padding: 0.4em;
|
||||
border-radius: 1em;
|
||||
background-color: #36c8;
|
||||
font-size: xx-large;
|
||||
margin-bottom: 16px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.wavering {
|
||||
animation: blink 40s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
::backdrop {
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
magenta,
|
||||
rebeccapurple,
|
||||
dodgerblue,
|
||||
green
|
||||
);
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
color: black;
|
||||
flex: 1;
|
||||
background-color: #bfbfbf;
|
||||
border: none;
|
||||
margin: 4px auto;
|
||||
cursor: pointer;
|
||||
opacity: 80%;
|
||||
}
|
||||
|
||||
.tab-button.active {
|
||||
opacity: unset;
|
||||
font-weight: bold;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
span {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: medium;
|
||||
margin: 4px 0.5%;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
opacity: 50%;
|
||||
|
||||
&:hover {
|
||||
opacity: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Style the tab content (and add height:100% for full page content) */
|
||||
.tabcontent {
|
||||
display: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.renew {
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 8px;
|
||||
font-size: 150%;
|
||||
}
|
||||
|
||||
/*======LOGO=======*/
|
||||
|
||||
.logo {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
height: 140px;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
h3 {
|
||||
position: absolute;
|
||||
font-size: medium;
|
||||
width: 140px;
|
||||
top: 33%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: aliceblue;
|
||||
background-color: black;
|
||||
border-radius: unset;
|
||||
letter-spacing: 8px;
|
||||
padding: 0px 40px;
|
||||
font-family: monospace;
|
||||
}
|
||||
}
|
||||
|
||||
.avatars {
|
||||
margin: 16px auto;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
background-color: #f0f8ff88;
|
||||
font-weight: bold;
|
||||
font-size: 110%;
|
||||
padding: 3px 1em;
|
||||
width: fit-content;
|
||||
border: 3px solid;
|
||||
border-radius: 1em;
|
||||
margin: 4px auto;
|
||||
}
|
||||
|
||||
.group-avatar {
|
||||
background-color: #f0f8ff88;
|
||||
color: inherit;
|
||||
font-weight: bold;
|
||||
font-size: 90%;
|
||||
padding: 3px 1em;
|
||||
width: fit-content;
|
||||
border: 3px solid;
|
||||
border-radius: 1em;
|
||||
margin: 4px auto;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: grid;
|
||||
grid-template-columns: 8em 12em;
|
||||
gap: 2px 16px;
|
||||
|
||||
div {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
/*=======CONTEXT MENU=======*/
|
||||
.context-menu {
|
||||
z-index: 3;
|
||||
min-width: 8em;
|
||||
position: absolute;
|
||||
background: aliceblue;
|
||||
box-shadow: 4px 4px black;
|
||||
color: black;
|
||||
border: 3px solid black;
|
||||
border-radius: 16px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
padding: 4px 0.5em;
|
||||
border-bottom: 2px solid #0008;
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.networkroute {
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
left: 48px;
|
||||
}
|
||||
|
||||
/*========TEAM PANEL========*/
|
||||
.team-panel {
|
||||
max-width: 800px;
|
||||
padding: 1em;
|
||||
border: 3px solid black;
|
||||
box-shadow: 8px 8px black;
|
||||
margin: 1em;
|
||||
|
||||
input {
|
||||
max-width: 300px;
|
||||
}
|
||||
select {
|
||||
max-width: 335px;
|
||||
}
|
||||
}
|
||||
|
||||
.team-player {
|
||||
color: black;
|
||||
background-color: #36c4;
|
||||
border: 1px solid black;
|
||||
border-radius: 1.5em;
|
||||
margin: 4px;
|
||||
padding: 0.2em 0.5em;
|
||||
|
||||
&:hover {
|
||||
background-color: #36c8;
|
||||
}
|
||||
|
||||
&.new-player {
|
||||
background-color: #3838;
|
||||
}
|
||||
|
||||
&.disable-player {
|
||||
background-color: #e338;
|
||||
}
|
||||
}
|
||||
|
||||
.new-player-inputs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
|
||||
div {
|
||||
display: grid;
|
||||
grid-template-columns: 20ch auto;
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
grid-template-columns: auto;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
label {
|
||||
text-align: left;
|
||||
width: 20ch;
|
||||
margin: auto 1em;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
width: 90%;
|
||||
margin: 4px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mmp {
|
||||
background-color: lightskyblue;
|
||||
}
|
||||
|
||||
.fmp {
|
||||
background-color: salmon;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
background-color: #8888;
|
||||
}
|
||||
|
||||
13% {
|
||||
background-color: #8888;
|
||||
}
|
||||
|
||||
15% {
|
||||
background-color: #f00a;
|
||||
}
|
||||
|
||||
17% {
|
||||
background-color: #8888;
|
||||
}
|
||||
|
||||
38% {
|
||||
background-color: #8888;
|
||||
}
|
||||
|
||||
40% {
|
||||
background-color: #ff0a;
|
||||
}
|
||||
|
||||
42% {
|
||||
background-color: #8888;
|
||||
}
|
||||
|
||||
63% {
|
||||
background-color: #8888;
|
||||
}
|
||||
|
||||
65% {
|
||||
background-color: #248f24aa;
|
||||
}
|
||||
|
||||
67% {
|
||||
background-color: #8888;
|
||||
}
|
||||
|
||||
88% {
|
||||
background-color: #8888;
|
||||
}
|
||||
|
||||
90% {
|
||||
background-color: #4700b3aa;
|
||||
}
|
||||
|
||||
92% {
|
||||
background-color: #8888;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-color: #8888;
|
||||
}
|
||||
}
|
||||
|
||||
/*======SPINNER=======*/
|
||||
|
||||
.loader {
|
||||
display: block;
|
||||
border-radius: 16px;
|
||||
position: relative;
|
||||
height: 12px;
|
||||
width: 96%;
|
||||
margin: auto;
|
||||
border: 4px solid black;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.loader::after {
|
||||
content: "";
|
||||
width: 32%;
|
||||
height: 120%;
|
||||
background: #36c;
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
animation: animloader 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes animloader {
|
||||
0% {
|
||||
left: 0;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 100%;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-container {
|
||||
position: relative;
|
||||
margin: 20px auto;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.month-navigation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px;
|
||||
border-top: 2px solid grey;
|
||||
border-bottom: 2px solid grey;
|
||||
}
|
||||
|
||||
.month-navigation button {
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border: none;
|
||||
color: black;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.month-navigation span {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.day {
|
||||
padding: 2px;
|
||||
border: 1px solid grey;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.selected-day {
|
||||
border: 4px solid grey;
|
||||
}
|
||||
|
||||
.weekday {
|
||||
border-bottom: 3px solid black;
|
||||
margin: 0 1em;
|
||||
}
|
||||
|
||||
.day-circle {
|
||||
text-align: center;
|
||||
border-radius: 1.5em;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.today {
|
||||
border-radius: 1.6em;
|
||||
border: 4px solid red;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.has-event {
|
||||
border-radius: 1.5em;
|
||||
background-color: lightskyblue;
|
||||
}
|
||||
|
||||
.active-player {
|
||||
border-radius: 1.5em;
|
||||
border: 4px solid rebeccapurple;
|
||||
}
|
||||
|
||||
.events {
|
||||
font-size: large;
|
||||
padding: 20px;
|
||||
ul > li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
}
|
||||
50
frontend/src/App.tsx
Normal file
50
frontend/src/App.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import "./App.css";
|
||||
import Footer from "./Footer";
|
||||
import Header from "./Header";
|
||||
import Rankings from "./Rankings";
|
||||
import { BrowserRouter, Routes, Route } from "react-router";
|
||||
import { SessionProvider } from "./Session";
|
||||
import { GraphComponent } from "./Network";
|
||||
import MVPChart from "./MVPChart";
|
||||
import { SetPassword } from "./SetPassword";
|
||||
import { ThemeProvider } from "./ThemeProvider";
|
||||
import TeamPanel from "./TeamPanel";
|
||||
|
||||
const Maintenance = () => {
|
||||
return (
|
||||
<div style={{ textAlign: "center", padding: "20px" }}>
|
||||
<h2>We are under maintenance.</h2>
|
||||
<p>Please check back later. Thank you for your patience.</p>
|
||||
<span style={{ fontSize: "xx-large" }}>🚧</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/password" element={<SetPassword />} />
|
||||
<Route
|
||||
path="/*"
|
||||
element={
|
||||
<SessionProvider>
|
||||
<Header />
|
||||
<Routes>
|
||||
<Route index element={<Rankings />} />
|
||||
<Route path="network" element={<GraphComponent />} />
|
||||
<Route path="mvp" element={<MVPChart />} />
|
||||
<Route path="changepassword" element={<SetPassword />} />
|
||||
<Route path="team" element={<TeamPanel />} />
|
||||
</Routes>
|
||||
<Footer />
|
||||
</SessionProvider>
|
||||
}
|
||||
/>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
export default App;
|
||||
221
frontend/src/Avatar.tsx
Normal file
221
frontend/src/Avatar.tsx
Normal file
@@ -0,0 +1,221 @@
|
||||
import { createRef, MouseEventHandler, useEffect, useState } from "react";
|
||||
import { TeamState, useSession } from "./Session";
|
||||
import { User } from "./api";
|
||||
import { useTheme } from "./ThemeProvider";
|
||||
import { colourTheme, darkTheme, normalTheme, rainbowTheme } from "./themes";
|
||||
import { useNavigate } from "react-router";
|
||||
import { Team } from "./types";
|
||||
|
||||
interface ContextMenuItem {
|
||||
label: string;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
const UserInfo = (user: User, teams: TeamState | undefined) => {
|
||||
return (
|
||||
<div className="user-info">
|
||||
<div>
|
||||
<b>username: </b>
|
||||
</div>
|
||||
<div>{user?.username}</div>
|
||||
<div>
|
||||
<b>display name: </b>
|
||||
</div>
|
||||
<div>{user?.display_name}</div>
|
||||
<div>
|
||||
<b>gender: </b>
|
||||
</div>
|
||||
<div>{user?.gender?.toUpperCase() || "-"}</div>
|
||||
<div>
|
||||
<b>number: </b>
|
||||
</div>
|
||||
<div>{user?.number || "-"}</div>
|
||||
<div>
|
||||
<b>email: </b>
|
||||
</div>
|
||||
<div>{user?.email || "-"}</div>
|
||||
{teams && (
|
||||
<>
|
||||
<div>
|
||||
<b>teams: </b>
|
||||
</div>
|
||||
<ul
|
||||
style={{
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
{teams.teams.map((team, index) => (
|
||||
<li>
|
||||
{<b>{team.name}</b>} (
|
||||
{team.location || team.country || "location unknown"})
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function Avatar() {
|
||||
const { user, teams, setTeams, onLogout } = useSession();
|
||||
const { theme, setTheme } = useTheme();
|
||||
const navigate = useNavigate();
|
||||
const [contextMenu, setContextMenu] = useState<{
|
||||
open: boolean;
|
||||
allowOpen: boolean;
|
||||
mouseX: number;
|
||||
mouseY: number;
|
||||
}>({ open: false, allowOpen: true, mouseX: 0, mouseY: 0 });
|
||||
const contextMenuRef = createRef<HTMLUListElement>();
|
||||
const avatarRef = createRef<HTMLDivElement>();
|
||||
|
||||
const contextMenuItems: ContextMenuItem[] = [
|
||||
{ label: "view Profile", onClick: handleViewProfile },
|
||||
{ label: "change password", onClick: () => navigate("/changepassword") },
|
||||
{
|
||||
label: "change theme",
|
||||
onClick: () => {
|
||||
switch (theme) {
|
||||
case darkTheme:
|
||||
setTheme(colourTheme);
|
||||
break;
|
||||
case colourTheme:
|
||||
setTheme(rainbowTheme);
|
||||
break;
|
||||
case rainbowTheme:
|
||||
setTheme(normalTheme);
|
||||
break;
|
||||
case normalTheme:
|
||||
setTheme(darkTheme);
|
||||
}
|
||||
},
|
||||
},
|
||||
{ label: "logout", onClick: onLogout },
|
||||
];
|
||||
|
||||
const handleMenuClick: MouseEventHandler<HTMLDivElement> = (event) => {
|
||||
if (!contextMenu.allowOpen) return;
|
||||
event.preventDefault();
|
||||
setContextMenu({
|
||||
open: !contextMenu.open,
|
||||
allowOpen: contextMenu.allowOpen,
|
||||
mouseX: event.clientX + 4,
|
||||
mouseY: event.clientY + 2,
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (contextMenu.open) {
|
||||
document.addEventListener("click", handleCloseContextMenuOutside);
|
||||
}
|
||||
return () => {
|
||||
document.removeEventListener("click", handleCloseContextMenuOutside);
|
||||
};
|
||||
}, [contextMenu.open]);
|
||||
|
||||
const handleMenuClose = () => {
|
||||
setContextMenu({ ...contextMenu, open: false });
|
||||
setContextMenu((prevContextMenu) => ({
|
||||
...prevContextMenu,
|
||||
allowOpen: false,
|
||||
}));
|
||||
setTimeout(() => {
|
||||
setContextMenu((prevContextMenu) => ({
|
||||
...prevContextMenu,
|
||||
allowOpen: true,
|
||||
}));
|
||||
}, 100);
|
||||
};
|
||||
|
||||
const handleCloseContextMenuOutside: (event: MouseEvent) => void = (ev) => {
|
||||
if (
|
||||
!(
|
||||
contextMenuRef.current?.contains(ev.target as Node) ||
|
||||
avatarRef.current?.contains(ev.target as Node)
|
||||
)
|
||||
)
|
||||
handleMenuClose();
|
||||
};
|
||||
|
||||
const [dialog, setDialog] = useState(<></>);
|
||||
const dialogRef = createRef<HTMLDialogElement>();
|
||||
|
||||
function handleViewProfile() {
|
||||
if (user && teams) {
|
||||
dialogRef.current?.showModal();
|
||||
setDialog(UserInfo(user, teams));
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="avatars" style={{ display: user ? "block" : "none" }}>
|
||||
<div
|
||||
className="avatar"
|
||||
onContextMenu={handleMenuClick}
|
||||
onClick={(event) => {
|
||||
if (contextMenu.open && event.target === avatarRef.current) {
|
||||
handleMenuClose();
|
||||
} else {
|
||||
handleMenuClick(event);
|
||||
}
|
||||
}}
|
||||
ref={avatarRef}
|
||||
>
|
||||
👤 {user?.username}
|
||||
</div>
|
||||
{teams && teams?.teams.length > 1 && (
|
||||
<select
|
||||
className="group-avatar"
|
||||
value={teams.activeTeam}
|
||||
onChange={(e) =>
|
||||
setTeams({ ...teams, activeTeam: Number(e.target.value) })
|
||||
}
|
||||
>
|
||||
{teams.teams.map((team) => (
|
||||
<option key={team.id} value={team.id}>
|
||||
👥 {team.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{contextMenu.open && (
|
||||
<ul
|
||||
className="context-menu"
|
||||
ref={contextMenuRef}
|
||||
style={{
|
||||
top: contextMenu.mouseY,
|
||||
left: contextMenu.mouseX,
|
||||
}}
|
||||
>
|
||||
{contextMenuItems.map((item, index) => (
|
||||
<li
|
||||
key={index}
|
||||
onClick={() => {
|
||||
item.onClick();
|
||||
handleMenuClose();
|
||||
}}
|
||||
>
|
||||
{item.label}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
<dialog
|
||||
id="AvatarDialog"
|
||||
ref={dialogRef}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
event.currentTarget.close();
|
||||
}}
|
||||
>
|
||||
{dialog}
|
||||
</dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
46
frontend/src/CUTT.tsx
Normal file
46
frontend/src/CUTT.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import "./main.css";
|
||||
import Header from "./Header";
|
||||
import Footer from "./Footer";
|
||||
import { BrowserRouter, Route, Routes } from "react-router";
|
||||
import { SessionProvider } from "./Session";
|
||||
import Rankings from "./Form";
|
||||
import TeamPanel from "./TeamPanel";
|
||||
import { GraphComponent } from "./Network";
|
||||
import MVPChart from "./MVPChart";
|
||||
|
||||
const Maintenance = () => {
|
||||
return (
|
||||
<section className="hero is-large">
|
||||
<div className="hero-body has-text-centered">
|
||||
<p className="title is-1">🚧</p>
|
||||
<p className="subtitle">We are under maintenance.</p>
|
||||
<p>Please check back later. Thank you for your patience.</p>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route
|
||||
path="/*"
|
||||
element={
|
||||
<SessionProvider>
|
||||
<Header />
|
||||
<Routes>
|
||||
<Route index element={<Rankings />} />
|
||||
<Route path="network" element={<GraphComponent />} />
|
||||
<Route path="mvp" element={<MVPChart />} />
|
||||
<Route path="team" element={<TeamPanel />} />
|
||||
</Routes>
|
||||
<Footer />
|
||||
</SessionProvider>
|
||||
}
|
||||
/>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
export default App;
|
||||
174
frontend/src/Calendar.tsx
Normal file
174
frontend/src/Calendar.tsx
Normal file
@@ -0,0 +1,174 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { apiAuth } from "./api";
|
||||
import { useSession } from "./Session";
|
||||
|
||||
interface Datum {
|
||||
[id: number]: string;
|
||||
}
|
||||
interface Events {
|
||||
[key: string]: Datum;
|
||||
}
|
||||
|
||||
const Calendar = ({ playerId }: { playerId: number }) => {
|
||||
const [selectedDate, setSelectedDate] = useState(new Date());
|
||||
const [events, setEvents] = useState<Events>();
|
||||
const { teams, players } = useSession();
|
||||
|
||||
async function loadSubmissionDates() {
|
||||
if (teams?.activeTeam) {
|
||||
const data = await apiAuth(`analysis/times/${teams?.activeTeam}`, null);
|
||||
if (data.detail) {
|
||||
console.log(data.detail);
|
||||
} else {
|
||||
setEvents(data as Events);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
loadSubmissionDates();
|
||||
}, [players]);
|
||||
|
||||
const getEventsForDay = (date: Date) => {
|
||||
return events && events[date.toISOString().split("T")[0]];
|
||||
};
|
||||
|
||||
// Handle day click
|
||||
const handleDayClick = (date: Date) => {
|
||||
setSelectedDate(date);
|
||||
};
|
||||
|
||||
// Navigate to previous month
|
||||
const handlePrevMonth = () => {
|
||||
const date = new Date(selectedDate);
|
||||
date.setMonth(date.getMonth() - 1);
|
||||
setSelectedDate(date);
|
||||
};
|
||||
|
||||
// Navigate to next month
|
||||
const handleNextMonth = () => {
|
||||
const date = new Date(selectedDate);
|
||||
date.setMonth(date.getMonth() + 1);
|
||||
setSelectedDate(date);
|
||||
};
|
||||
|
||||
// Render month navigation
|
||||
const renderMonthNavigation = () => {
|
||||
return (
|
||||
<div className="month-navigation">
|
||||
<button onClick={handlePrevMonth}><</button>
|
||||
<span>
|
||||
<button onClick={() => setSelectedDate(new Date())}>📅</button>
|
||||
{selectedDate.toLocaleString("default", {
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})}
|
||||
</span>
|
||||
<button onClick={handleNextMonth}>></button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Render the calendar
|
||||
const renderCalendar = () => {
|
||||
const firstDayOfMonth = new Date(
|
||||
selectedDate.getFullYear(),
|
||||
selectedDate.getMonth(),
|
||||
0
|
||||
).getDay();
|
||||
const lastDateOfMonth = new Date(
|
||||
selectedDate.getFullYear(),
|
||||
selectedDate.getMonth() + 1,
|
||||
0
|
||||
).getDate();
|
||||
|
||||
let days: JSX.Element[] = [];
|
||||
let day = 1;
|
||||
|
||||
for (let i = 0; i < 7; i++) {
|
||||
const date = new Date(0);
|
||||
date.setDate(i + 5);
|
||||
days.push(
|
||||
<div key={"weekday_" + i} className="weekday">
|
||||
{date.toLocaleString("default", {
|
||||
weekday: "narrow",
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Add empty cells for the first week
|
||||
for (let i = 0; i < firstDayOfMonth; i++) {
|
||||
days.push(<div key={"prev" + i} className="empty"></div>);
|
||||
}
|
||||
|
||||
// Render each day of the month
|
||||
while (day <= lastDateOfMonth) {
|
||||
const date = new Date(selectedDate);
|
||||
date.setDate(day);
|
||||
const todaysEvents = getEventsForDay(date);
|
||||
|
||||
days.push(
|
||||
<div
|
||||
key={date.getDate()}
|
||||
className={
|
||||
"day" +
|
||||
(date.toDateString() === selectedDate.toDateString()
|
||||
? " selected-day"
|
||||
: "")
|
||||
}
|
||||
onClick={() => handleDayClick(date)}
|
||||
>
|
||||
<div
|
||||
className={
|
||||
"day-circle" +
|
||||
(date.toDateString() === new Date().toDateString()
|
||||
? " today"
|
||||
: "") +
|
||||
(todaysEvents ? " has-event" : "") +
|
||||
(todaysEvents && playerId in todaysEvents ? " active-player" : "")
|
||||
}
|
||||
>
|
||||
{day}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
day++;
|
||||
}
|
||||
|
||||
return <div className="calendar">{days}</div>;
|
||||
};
|
||||
|
||||
// Render events for the selected day
|
||||
const renderEvents = () => {
|
||||
const eventsForDay = getEventsForDay(selectedDate);
|
||||
return (
|
||||
<div className="events">
|
||||
{eventsForDay && (
|
||||
<ul>
|
||||
{Object.entries(eventsForDay).map(([id, sub]) => {
|
||||
const name = players?.find((p) => p.id === Number(id));
|
||||
return (
|
||||
<li key={id}>
|
||||
{name !== undefined ? name.display_name : ""}:{" "}
|
||||
<span style={{ letterSpacing: 8 }}>{sub}</span>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="calendar-container">
|
||||
<h2>Latest Submissions</h2>
|
||||
{renderMonthNavigation()}
|
||||
{renderCalendar()}
|
||||
{renderEvents()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Calendar;
|
||||
25
frontend/src/Footer.tsx
Normal file
25
frontend/src/Footer.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import { useLocation } from "react-router";
|
||||
import { Link } from "react-router";
|
||||
import { useSession } from "./Session";
|
||||
|
||||
export default function Footer() {
|
||||
const location = useLocation();
|
||||
const { user, teams } = useSession();
|
||||
return (
|
||||
<footer className="footer">
|
||||
<div className="content has-text-centered">
|
||||
<p className="grey">
|
||||
something not working? message <a href="https://t.me/x0124816">me </a>
|
||||
or fix it here:
|
||||
<a
|
||||
className="icon is-small"
|
||||
href="https://git.0124816.xyz/julius/cutt"
|
||||
key="gitea"
|
||||
>
|
||||
<img src="gitea.svg" alt="gitea" />
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
528
frontend/src/Form.tsx
Normal file
528
frontend/src/Form.tsx
Normal file
@@ -0,0 +1,528 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { ReactSortable, ReactSortableProps } from "react-sortablejs";
|
||||
import { apiAuth, User } from "./api";
|
||||
import { TeamState, useSession } from "./Session";
|
||||
import TabController from "./TabController";
|
||||
import { Chemistry, MVPRanking, PlayerType } from "./types";
|
||||
|
||||
type PlayerListProps = Partial<ReactSortableProps<any>> & {
|
||||
orderedList?: boolean;
|
||||
gender?: boolean;
|
||||
};
|
||||
|
||||
function PlayerList(props: PlayerListProps) {
|
||||
const fmps = props.list?.filter((item) => item.gender === "fmp").length;
|
||||
return (
|
||||
<ReactSortable
|
||||
{...props}
|
||||
className="buttons is-centered is-clearfix"
|
||||
direction={"vertical"}
|
||||
animation={200}
|
||||
swapThreshold={1}
|
||||
handle=".handle"
|
||||
draggable=".handle"
|
||||
>
|
||||
{props.list &&
|
||||
props.list.map((item, index) => (
|
||||
<div className="handle" key={item.id}>
|
||||
<button
|
||||
className={
|
||||
"button is-primary is-light " +
|
||||
(props.gender ? item.gender : "")
|
||||
}
|
||||
>
|
||||
{props.orderedList
|
||||
? props.gender
|
||||
? index +
|
||||
1 -
|
||||
(item.gender !== "fmp" ? fmps! : 0) +
|
||||
". " +
|
||||
item.display_name
|
||||
: index + 1 + ". " + item.display_name
|
||||
: item.display_name}
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</ReactSortable>
|
||||
);
|
||||
}
|
||||
|
||||
function PlayerMenuList(props: PlayerListProps) {
|
||||
const fmps = props.list?.filter((item) => item.gender === "fmp").length;
|
||||
return (
|
||||
<ReactSortable
|
||||
{...props}
|
||||
className="menu-list"
|
||||
animation={200}
|
||||
swapThreshold={1}
|
||||
>
|
||||
{props.list &&
|
||||
props.list.map((item, index) => (
|
||||
<p
|
||||
key={item.id}
|
||||
className={
|
||||
"menu-item is-primary is-light " +
|
||||
(props.gender ? item.gender : "")
|
||||
}
|
||||
>
|
||||
{props.orderedList
|
||||
? props.gender
|
||||
? index +
|
||||
1 -
|
||||
(item.gender !== "fmp" ? fmps! : 0) +
|
||||
". " +
|
||||
item.display_name
|
||||
: index + 1 + ". " + item.display_name
|
||||
: item.display_name}
|
||||
</p>
|
||||
))}
|
||||
</ReactSortable>
|
||||
);
|
||||
}
|
||||
|
||||
function filterSort(list: User[], ids: number[]): User[] {
|
||||
const objectMap = new Map(list.map((obj) => [obj.id, obj]));
|
||||
const filteredAndSortedObjects = ids
|
||||
.map((id) => objectMap.get(id))
|
||||
.filter((obj) => obj !== undefined);
|
||||
return filteredAndSortedObjects;
|
||||
}
|
||||
|
||||
interface PlayerInfoProps {
|
||||
user: User;
|
||||
teams: TeamState;
|
||||
players: User[];
|
||||
}
|
||||
|
||||
function TypeDnD({ user, teams, players }: PlayerInfoProps) {
|
||||
const [availablePlayers, setAvailablePlayers] = useState<User[]>(players);
|
||||
const [handlers, setHandlers] = useState<User[]>([]);
|
||||
const [combis, setCombis] = useState<User[]>([]);
|
||||
const [cutters, setCutters] = useState<User[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
handleGet();
|
||||
}, [players]);
|
||||
|
||||
const [dialog, setDialog] = useState("dialog");
|
||||
const dialogRef = useRef<HTMLDialogElement>(null);
|
||||
|
||||
async function handleSubmit() {
|
||||
if (dialogRef.current) dialogRef.current.showModal();
|
||||
setDialog("sending...");
|
||||
let handlerlist = handlers.map(({ id }) => id);
|
||||
let combilist = combis.map(({ id }) => id);
|
||||
let cutterlist = cutters.map(({ id }) => id);
|
||||
const data = {
|
||||
user: user.id,
|
||||
handlers: handlerlist,
|
||||
combis: combilist,
|
||||
cutters: cutterlist,
|
||||
team: teams.activeTeam,
|
||||
};
|
||||
const response = await apiAuth("playertype", data, "PUT");
|
||||
setDialog(response || "try sending again");
|
||||
}
|
||||
|
||||
async function handleGet() {
|
||||
setLoading(true);
|
||||
const data = await apiAuth(`playertype/${teams.activeTeam}`, null, "GET");
|
||||
if (data.detail) {
|
||||
console.log(data.detail);
|
||||
setAvailablePlayers(players);
|
||||
setHandlers([]);
|
||||
setCombis([]);
|
||||
setCutters([]);
|
||||
} else {
|
||||
const playertype = data as PlayerType;
|
||||
setAvailablePlayers(
|
||||
players.filter(
|
||||
(player) =>
|
||||
!playertype.handlers.includes(player.id) &&
|
||||
!playertype.combis.includes(player.id) &&
|
||||
!playertype.cutters.includes(player.id)
|
||||
)
|
||||
);
|
||||
setHandlers(filterSort(players, playertype.handlers));
|
||||
setCombis(filterSort(players, playertype.combis));
|
||||
setCutters(filterSort(players, playertype.cutters));
|
||||
}
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<HeaderControl
|
||||
onLoad={handleGet}
|
||||
onClear={() => {
|
||||
setAvailablePlayers(players);
|
||||
setHandlers([]);
|
||||
setCombis([]);
|
||||
setCutters([]);
|
||||
}}
|
||||
onSubmit={handleSubmit}
|
||||
/>
|
||||
<div className="columns container is-multiline is-mobile is-1-mobile">
|
||||
<div className="column is-full is-flex is-justify-content-center">
|
||||
<div className="box" style={{ maxWidth: 800 }}>
|
||||
<p className="subtitle is-6 is-uppercase has-text-weight-light">
|
||||
available players
|
||||
</p>
|
||||
<PlayerList
|
||||
list={availablePlayers}
|
||||
setList={setAvailablePlayers}
|
||||
group={"type-shared"}
|
||||
className="dragbox reservoir"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="column">
|
||||
<div className="columns">
|
||||
<div className="column">
|
||||
<div className="box">
|
||||
<p className="subtitle is-6 is-uppercase has-text-weight-light">
|
||||
handler
|
||||
</p>
|
||||
<PlayerList
|
||||
list={handlers}
|
||||
setList={setHandlers}
|
||||
group={"type-shared"}
|
||||
className="dragbox"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="column">
|
||||
<div className="box">
|
||||
<p className="subtitle is-6 is-uppercase has-text-weight-light">
|
||||
combi
|
||||
</p>
|
||||
<PlayerList
|
||||
list={combis}
|
||||
setList={setCombis}
|
||||
group={"type-shared"}
|
||||
className="middle dragbox"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="column">
|
||||
<div className="box">
|
||||
<p className="subtitle is-6 is-uppercase has-text-weight-light">
|
||||
cutter
|
||||
</p>
|
||||
<PlayerList
|
||||
list={cutters}
|
||||
setList={setCutters}
|
||||
group={"type-shared"}
|
||||
className="dragbox"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<dialog
|
||||
ref={dialogRef}
|
||||
id="PlayerTypeDialog"
|
||||
onClick={(event) => {
|
||||
event.currentTarget.close();
|
||||
}}
|
||||
>
|
||||
{dialog}
|
||||
</dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function MVPDnD({ user, teams, players }: PlayerInfoProps) {
|
||||
const [availablePlayers, setAvailablePlayers] = useState<User[]>(players);
|
||||
const [rankedPlayers, setRankedPlayers] = useState<User[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [mixed, setMixed] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const activeTeam = teams.teams.find((team) => team.id == teams.activeTeam);
|
||||
activeTeam && setMixed(activeTeam.mixed);
|
||||
handleGet();
|
||||
}, [players]);
|
||||
|
||||
useEffect(() => {
|
||||
handleGet();
|
||||
// setMixedList(rankedPlayers);
|
||||
}, [mixed]);
|
||||
|
||||
const [dialog, setDialog] = useState("dialog");
|
||||
const dialogRef = useRef<HTMLDialogElement>(null);
|
||||
|
||||
async function handleSubmit() {
|
||||
if (dialogRef.current) dialogRef.current.showModal();
|
||||
setDialog("sending...");
|
||||
let mvps = rankedPlayers.map(({ id }) => id);
|
||||
const data = { user: user.id, mvps: mvps, team: teams.activeTeam };
|
||||
const response = await apiAuth("mvps", data, "PUT");
|
||||
response ? setDialog(response) : setDialog("try sending again");
|
||||
}
|
||||
|
||||
const setMixedList = (newList: User[]) =>
|
||||
mixed
|
||||
? setRankedPlayers(
|
||||
newList.sort((a, b) =>
|
||||
a.gender && b.gender ? a.gender.localeCompare(b.gender) : -1
|
||||
)
|
||||
)
|
||||
: setRankedPlayers(newList);
|
||||
|
||||
async function handleGet() {
|
||||
setLoading(true);
|
||||
const data = await apiAuth(`mvps/${teams.activeTeam}`, null, "GET");
|
||||
if (data.detail) {
|
||||
console.log(data.detail);
|
||||
setAvailablePlayers(players);
|
||||
setRankedPlayers([]);
|
||||
} else {
|
||||
const mvps = data as MVPRanking;
|
||||
setMixedList(filterSort(players, mvps.mvps));
|
||||
setAvailablePlayers(
|
||||
players.filter((user) => !mvps.mvps.includes(user.id))
|
||||
);
|
||||
}
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<HeaderControl
|
||||
onLoad={handleGet}
|
||||
onClear={() => {
|
||||
setAvailablePlayers(players);
|
||||
setRankedPlayers([]);
|
||||
}}
|
||||
onSubmit={handleSubmit}
|
||||
/>
|
||||
{loading ? (
|
||||
<progress className="progress is-primary" max="100"></progress>
|
||||
) : (
|
||||
<div className="columns container is-mobile is-1-mobile">
|
||||
<div className="column">
|
||||
<div className="box">
|
||||
<p className="subtitle is-6 is-uppercase has-text-weight-light">
|
||||
available players
|
||||
</p>
|
||||
<PlayerList
|
||||
list={availablePlayers}
|
||||
setList={setAvailablePlayers}
|
||||
group={{
|
||||
name: "mvp-shared",
|
||||
}}
|
||||
className="dragbox"
|
||||
gender={mixed}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="column">
|
||||
<div className="box">
|
||||
<p className="subtitle is-2 has-text-centered is-uppercase has-text-weight-light">
|
||||
🏆
|
||||
</p>
|
||||
<div className="menu">
|
||||
<PlayerMenuList
|
||||
list={rankedPlayers}
|
||||
setList={setMixedList}
|
||||
group={{
|
||||
name: "mvp-shared",
|
||||
}}
|
||||
className="dragbox"
|
||||
orderedList
|
||||
gender={mixed}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<dialog
|
||||
ref={dialogRef}
|
||||
id="MVPDialog"
|
||||
onClick={(event) => {
|
||||
event.currentTarget.close();
|
||||
}}
|
||||
>
|
||||
{dialog}
|
||||
</dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function ChemistryDnDMobile({ user, teams, players }: PlayerInfoProps) {
|
||||
var otherPlayers = players.filter((player) => player.id !== user.id);
|
||||
const [playersLeft, setPlayersLeft] = useState<User[]>([]);
|
||||
const [playersMiddle, setPlayersMiddle] = useState<User[]>(otherPlayers);
|
||||
const [playersRight, setPlayersRight] = useState<User[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
handleGet();
|
||||
}, [players]);
|
||||
|
||||
const [dialog, setDialog] = useState("dialog");
|
||||
const dialogRef = useRef<HTMLDialogElement>(null);
|
||||
|
||||
async function handleSubmit() {
|
||||
if (dialogRef.current) dialogRef.current.showModal();
|
||||
setDialog("sending...");
|
||||
let left = playersLeft.map(({ id }) => id);
|
||||
let middle = playersMiddle.map(({ id }) => id);
|
||||
let right = playersRight.map(({ id }) => id);
|
||||
const data = {
|
||||
user: user.id,
|
||||
hate: left,
|
||||
undecided: middle,
|
||||
love: right,
|
||||
team: teams.activeTeam,
|
||||
};
|
||||
const response = await apiAuth("chemistry", data, "PUT");
|
||||
setDialog(response || "try sending again");
|
||||
}
|
||||
|
||||
async function handleGet() {
|
||||
setLoading(true);
|
||||
const data = await apiAuth(`chemistry/${teams.activeTeam}`, null, "GET");
|
||||
if (data.detail) {
|
||||
console.log(data.detail);
|
||||
setPlayersRight([]);
|
||||
setPlayersMiddle(otherPlayers);
|
||||
setPlayersLeft([]);
|
||||
} else {
|
||||
const chemistry = data as Chemistry;
|
||||
setPlayersLeft(filterSort(otherPlayers, chemistry.hate));
|
||||
setPlayersMiddle(
|
||||
otherPlayers.filter(
|
||||
(player) =>
|
||||
!chemistry.hate.includes(player.id) &&
|
||||
!chemistry.love.includes(player.id)
|
||||
)
|
||||
);
|
||||
setPlayersRight(filterSort(otherPlayers, chemistry.love));
|
||||
}
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<HeaderControl
|
||||
onLoad={handleGet}
|
||||
onClear={() => {
|
||||
setPlayersRight([]);
|
||||
setPlayersMiddle(otherPlayers);
|
||||
setPlayersLeft([]);
|
||||
}}
|
||||
onSubmit={handleSubmit}
|
||||
/>
|
||||
{loading ? (
|
||||
<progress className="progress is-primary" max="100"></progress>
|
||||
) : (
|
||||
<div className="columns container is-multiline is-mobile is-1-mobile">
|
||||
<div className="column is-full is-flex is-justify-content-center">
|
||||
<div className="box" style={{ maxWidth: 800 }}>
|
||||
<p className="subtitle is-6 is-uppercase has-text-weight-light">
|
||||
neutral
|
||||
</p>
|
||||
<PlayerList
|
||||
list={playersMiddle}
|
||||
setList={setPlayersMiddle}
|
||||
group={"shared"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="column">
|
||||
<div className="columns is-mobile">
|
||||
<div className="column">
|
||||
<div className="box">
|
||||
<p className="subtitle is-6 is-uppercase has-text-weight-light">
|
||||
rather not
|
||||
</p>
|
||||
<PlayerList
|
||||
list={playersLeft}
|
||||
setList={setPlayersLeft}
|
||||
group={"shared"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="column">
|
||||
<div className="box">
|
||||
<p className="subtitle is-6 is-uppercase has-text-weight-light">
|
||||
yes, please ♥️
|
||||
</p>
|
||||
<PlayerList
|
||||
list={playersRight}
|
||||
setList={setPlayersRight}
|
||||
group={"shared"}
|
||||
orderedList
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<dialog
|
||||
ref={dialogRef}
|
||||
id="ChemistryDialog"
|
||||
onClick={(event) => {
|
||||
event.currentTarget.close();
|
||||
}}
|
||||
>
|
||||
{dialog}
|
||||
</dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
interface HeaderControlProps {
|
||||
onLoad: () => void;
|
||||
onClear: () => void;
|
||||
onSubmit: () => void;
|
||||
}
|
||||
function HeaderControl({ onLoad, onClear, onSubmit }: HeaderControlProps) {
|
||||
return (
|
||||
<div className="buttons is-centered">
|
||||
<button className="button is-small is-light" onClick={onLoad}>
|
||||
🗃️ restore previous
|
||||
</button>
|
||||
<button className="button is-small is-light" onClick={onClear}>
|
||||
🗑️ start over
|
||||
</button>
|
||||
<button className="button is-small is-light" onClick={onSubmit}>
|
||||
💾 submit
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Rankings() {
|
||||
const { user, teams, players } = useSession();
|
||||
const tabs = [
|
||||
{ id: "Chemistry", label: "🧪 Chemistry" },
|
||||
{ id: "MVP", label: "🏆 MVP" },
|
||||
{ id: "Type", label: "🃏 Type" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="container block">
|
||||
<p className="notification is-warning is-light">
|
||||
assign as many or as few players as you want and don't forget to 💾
|
||||
<strong> submit</strong> when you're done :)
|
||||
</p>
|
||||
{user && teams && players ? (
|
||||
<TabController tabs={tabs}>
|
||||
<ChemistryDnDMobile {...{ user, teams, players }} />
|
||||
<MVPDnD {...{ user, teams, players }} />
|
||||
<TypeDnD {...{ user, teams, players }} />
|
||||
</TabController>
|
||||
) : (
|
||||
<progress className="progress is-primary" max="100"></progress>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
85
frontend/src/Header.tsx
Normal file
85
frontend/src/Header.tsx
Normal file
@@ -0,0 +1,85 @@
|
||||
import { Link } from "react-router";
|
||||
import { useSession } from "./Session";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function Header() {
|
||||
const { user, teams, setTeams, players, onLogout } = useSession();
|
||||
const [burgerActive, setBurgerActive] = useState(false);
|
||||
return (
|
||||
<nav className="navbar" role="navigation" aria-label="main navigation">
|
||||
<div className="navbar-brand">
|
||||
<Link className="navbar-item" to="/">
|
||||
<img
|
||||
style={{ maxHeight: "unset" }}
|
||||
className="image"
|
||||
alt="cool ultimate team tool"
|
||||
src="cutt.svg"
|
||||
/>
|
||||
</Link>
|
||||
|
||||
<a
|
||||
role="button"
|
||||
className={"navbar-burger" + (burgerActive ? " is-active" : "")}
|
||||
aria-label="menu"
|
||||
aria-expanded="false"
|
||||
data-target="navbar"
|
||||
onClick={() => setBurgerActive(!burgerActive)}
|
||||
>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={"navbar-menu" + (burgerActive ? " is-active" : "")}
|
||||
id="navbar"
|
||||
>
|
||||
{user?.scopes.includes(`team:${teams?.activeTeam}`) && (
|
||||
<div className="navbar-start">
|
||||
<Link className="navbar-item" to="/network">
|
||||
<span>Sociogram</span>
|
||||
</Link>
|
||||
<Link className="navbar-item" to="/mvp">
|
||||
<span>MVP</span>
|
||||
</Link>
|
||||
<Link className="navbar-item" to="/team">
|
||||
<span>Team</span>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
<div className="navbar-end">
|
||||
{teams && (
|
||||
<div className="navbar-item has-dropdown is-hoverable">
|
||||
<a className="navbar-link">my teams</a>
|
||||
<div className="navbar-dropdown">
|
||||
{teams.teams.map((team, index) => (
|
||||
<a
|
||||
onClick={() => setTeams({ ...teams, activeTeam: team.id })}
|
||||
className={
|
||||
"navbar-item" +
|
||||
(team.id === teams.activeTeam
|
||||
? " is-bold has-text-weight-extrabold"
|
||||
: "")
|
||||
}
|
||||
>
|
||||
{team.name}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="navbar-item">
|
||||
{user?.username}
|
||||
<div className="buttons">
|
||||
<button className="button is-light" onClick={onLogout}>
|
||||
Log out
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
72
frontend/src/Icons.tsx
Normal file
72
frontend/src/Icons.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
export const Eye = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 36 36"
|
||||
>
|
||||
<path
|
||||
fill="#E1E8ED"
|
||||
d="M35.059 18c0 3.304-7.642 11-17.067 11S.925 22.249.925 18c0-3.314 34.134-3.314 34.134 0"
|
||||
/>
|
||||
<path
|
||||
fill="#292F33"
|
||||
d="M35.059 18H.925c0-3.313 7.642-11 17.067-11s17.067 7.686 17.067 11"
|
||||
/>
|
||||
<path
|
||||
fill="#F5F8FA"
|
||||
d="M33.817 18c0 2.904-7.087 9.667-15.826 9.667S2.166 21.732 2.166 18c0-2.912 7.085-9.666 15.825-9.666C26.73 8.333 33.817 15.088 33.817 18"
|
||||
/>
|
||||
<circle
|
||||
cx="18"
|
||||
cy="18"
|
||||
r="8.458"
|
||||
fill="#8B5E3C"
|
||||
style={{ fill: "#919191", fillOpacity: 1 }}
|
||||
/>
|
||||
<circle cx="18" cy="18" r="4.708" fill="#292F33" />
|
||||
<circle cx="14.983" cy="15" r="2" fill="#F5F8FA" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const EyeSlash = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 36 36"
|
||||
>
|
||||
<path
|
||||
fill="#e1e8ed"
|
||||
d="M35.059 18c0 3.304-7.642 11-17.067 11S.925 22.249.925 18c0-3.314 34.134-3.314 34.134 0"
|
||||
/>
|
||||
<path
|
||||
fill="#292f33"
|
||||
d="M35.059 18H.925c0-3.313 7.642-11 17.067-11s17.067 7.686 17.067 11"
|
||||
/>
|
||||
<path
|
||||
fill="#f5f8fa"
|
||||
d="M33.817 18c0 2.904-7.087 9.667-15.826 9.667S2.166 21.732 2.166 18c0-2.912 7.085-9.666 15.825-9.666C26.73 8.333 33.817 15.088 33.817 18"
|
||||
/>
|
||||
<circle
|
||||
cx="18"
|
||||
cy="18"
|
||||
r="8.458"
|
||||
fill="#8B5E3C"
|
||||
style={{ fill: "#919191", fillOpacity: 1 }}
|
||||
/>
|
||||
<circle cx="18" cy="18" r="4.708" fill="#292f33" />
|
||||
<circle cx="14.983" cy="15" r="2" fill="#f5f8fa" />
|
||||
<path
|
||||
d="m-2.97 30.25 41.94-24.5"
|
||||
style={{
|
||||
fill: "#404040",
|
||||
fillOpacity: 1,
|
||||
stroke: "#404040",
|
||||
strokeWidth: 3,
|
||||
strokeDasharray: "none",
|
||||
strokeOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
104
frontend/src/Login.tsx
Normal file
104
frontend/src/Login.tsx
Normal file
@@ -0,0 +1,104 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { currentUser, login, User } from "./api";
|
||||
import Header from "./Header";
|
||||
import { useLocation, useNavigate } from "react-router";
|
||||
import { Eye, EyeSlash } from "./Icons";
|
||||
|
||||
export interface LoginProps {
|
||||
onLogin: (user: User) => void;
|
||||
}
|
||||
|
||||
export const Login = ({ onLogin }: LoginProps) => {
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [visible, setVisible] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
async function doLogin() {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
const timeout = new Promise((r) => setTimeout(r, 1000));
|
||||
let user: User;
|
||||
try {
|
||||
await login({ username, password });
|
||||
user = await currentUser();
|
||||
} catch (e) {
|
||||
await timeout;
|
||||
setError("failed");
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
await timeout;
|
||||
onLogin(user);
|
||||
}
|
||||
|
||||
function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
doLogin();
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (location.state) {
|
||||
const queryUsername = location.state.username;
|
||||
const queryPassword = location.state.password;
|
||||
if (queryUsername) setUsername(queryUsername);
|
||||
if (queryPassword) setPassword(queryPassword);
|
||||
navigate(location.pathname, { replace: true });
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="field">
|
||||
<p className="control">
|
||||
<input
|
||||
className="input"
|
||||
type="text"
|
||||
id="username"
|
||||
name="username"
|
||||
placeholder="username"
|
||||
required
|
||||
value={username}
|
||||
onChange={(evt) => {
|
||||
setError("");
|
||||
setUsername(evt.target.value);
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div className="field">
|
||||
<p className="control">
|
||||
<input
|
||||
className="input"
|
||||
type={visible ? "text" : "password"}
|
||||
id="password"
|
||||
name="password"
|
||||
placeholder="password"
|
||||
minLength={8}
|
||||
value={password}
|
||||
required
|
||||
onChange={(evt) => {
|
||||
setError("");
|
||||
setPassword(evt.target.value);
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
{error && <p className="help is-danger">{error}</p>}
|
||||
</div>
|
||||
<div className="control">
|
||||
<button
|
||||
className="button"
|
||||
type="submit"
|
||||
value="login"
|
||||
style={{ fontSize: "small" }}
|
||||
>
|
||||
login
|
||||
</button>
|
||||
</div>
|
||||
{loading && <span className="loader" />}
|
||||
</form>
|
||||
);
|
||||
};
|
||||
63
frontend/src/MVPChart.tsx
Normal file
63
frontend/src/MVPChart.tsx
Normal file
@@ -0,0 +1,63 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { apiAuth } from "./api";
|
||||
import { PlayerRanking } from "./types";
|
||||
import RaceChart from "./RaceChart";
|
||||
import { useSession } from "./Session";
|
||||
import { useNavigate } from "react-router";
|
||||
|
||||
const MVPChart = () => {
|
||||
let initialData = {} as PlayerRanking[][];
|
||||
const [data, setData] = useState(initialData);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const [showStd, setShowStd] = useState(false);
|
||||
const { user, teams } = useSession();
|
||||
const [mixed, setMixed] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
useEffect(() => {
|
||||
user?.scopes.includes(`team:${teams?.activeTeam}`) ||
|
||||
teams?.activeTeam === 42 ||
|
||||
navigate("/", { replace: true });
|
||||
}, [user]);
|
||||
|
||||
useEffect(() => {
|
||||
if (teams) {
|
||||
const activeTeam = teams.teams.find(
|
||||
(team) => team.id == teams.activeTeam
|
||||
);
|
||||
activeTeam && setMixed(activeTeam.mixed);
|
||||
}
|
||||
}, [teams]);
|
||||
|
||||
async function loadData() {
|
||||
setLoading(true);
|
||||
if (teams) {
|
||||
await apiAuth(`analysis/mvp/${teams?.activeTeam}?mixed=${mixed}`, null)
|
||||
.then((data) => {
|
||||
if (data.detail) {
|
||||
setError(data.detail);
|
||||
return initialData;
|
||||
} else {
|
||||
setError("");
|
||||
return data as Promise<PlayerRanking[][]>;
|
||||
}
|
||||
})
|
||||
.then((data) => {
|
||||
setData(data.map((_data) => _data.sort((a, b) => a.rank - b.rank)));
|
||||
})
|
||||
.catch(() => setError("no access"));
|
||||
setLoading(false);
|
||||
} else setError("team unknown");
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, [teams]);
|
||||
|
||||
if (loading) return <span className="loader" />;
|
||||
else if (error) return <span>{error}</span>;
|
||||
else
|
||||
return data.map((_data) => <RaceChart std={showStd} playerRanks={_data} />);
|
||||
};
|
||||
|
||||
export default MVPChart;
|
||||
319
frontend/src/Network.tsx
Normal file
319
frontend/src/Network.tsx
Normal file
@@ -0,0 +1,319 @@
|
||||
import { ReactNode, useEffect, useRef, useState } from "react";
|
||||
import { apiAuth } from "./api";
|
||||
import {
|
||||
GraphCanvas,
|
||||
GraphCanvasRef,
|
||||
GraphEdge,
|
||||
GraphNode,
|
||||
SelectionProps,
|
||||
SelectionResult,
|
||||
useSelection,
|
||||
} from "reagraph";
|
||||
import { customTheme } from "./NetworkTheme";
|
||||
import { useSession } from "./Session";
|
||||
import { useNavigate } from "react-router";
|
||||
|
||||
interface NetworkData {
|
||||
nodes: GraphNode[];
|
||||
edges: GraphEdge[];
|
||||
}
|
||||
interface CustomSelectionProps extends SelectionProps {
|
||||
ignore: (GraphEdge | undefined)[];
|
||||
}
|
||||
|
||||
const useCustomSelection = (props: CustomSelectionProps): SelectionResult => {
|
||||
var result = useSelection(props);
|
||||
result.actives = result.actives.filter(
|
||||
(s) => !props.ignore.map((edge) => edge?.id).includes(s)
|
||||
);
|
||||
const ignored_nodes = props.ignore.map((edge) =>
|
||||
edge &&
|
||||
result.selections?.includes(edge.source) &&
|
||||
!result.selections?.includes(edge.target)
|
||||
? edge.target
|
||||
: ""
|
||||
);
|
||||
result.actives = result.actives.filter((s) => !ignored_nodes.includes(s));
|
||||
return result;
|
||||
};
|
||||
|
||||
export const GraphComponent = () => {
|
||||
let initialData = { nodes: [], edges: [] } as NetworkData;
|
||||
const [data, setData] = useState(initialData);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const [threed, setThreed] = useState(false);
|
||||
const [likes, setLikes] = useState(2);
|
||||
const [popularity, setPopularity] = useState(false);
|
||||
const [mutuality, setMutuality] = useState(false);
|
||||
const { user, teams } = useSession();
|
||||
const navigate = useNavigate();
|
||||
useEffect(() => {
|
||||
user?.scopes.includes(`team:${teams?.activeTeam}`) ||
|
||||
teams?.activeTeam === 42 ||
|
||||
navigate("/", { replace: true });
|
||||
}, [user]);
|
||||
|
||||
async function loadData() {
|
||||
setLoading(true);
|
||||
if (teams) {
|
||||
await apiAuth(`analysis/graph_json/${teams?.activeTeam}`, null)
|
||||
.then((data) => {
|
||||
if (data.detail) {
|
||||
setError(data.detail);
|
||||
return initialData;
|
||||
} else {
|
||||
setError("");
|
||||
return data as Promise<NetworkData>;
|
||||
}
|
||||
})
|
||||
.then((data) => setData(data))
|
||||
.catch(() => setError("no access"));
|
||||
setLoading(false);
|
||||
} else setError("team unknown");
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, [teams]);
|
||||
|
||||
const graphRef = useRef<GraphCanvasRef | null>(null);
|
||||
|
||||
function handleThreed() {
|
||||
setThreed(!threed);
|
||||
graphRef.current?.fitNodesInView();
|
||||
graphRef.current?.centerGraph();
|
||||
graphRef.current?.resetControls();
|
||||
}
|
||||
|
||||
function handlePopularity() {
|
||||
popularityLabel(!popularity);
|
||||
setPopularity(!popularity);
|
||||
}
|
||||
|
||||
function handleMutuality() {
|
||||
colorMatches(!mutuality);
|
||||
setMutuality(!mutuality);
|
||||
}
|
||||
|
||||
function showLabel() {
|
||||
switch (likes) {
|
||||
case 0:
|
||||
return "dislike";
|
||||
case 1:
|
||||
return "both";
|
||||
case 2:
|
||||
return "like";
|
||||
}
|
||||
}
|
||||
|
||||
function findMatches(edges: GraphEdge[]) {
|
||||
const adjacencyList = edges.map(
|
||||
(edge) => edge.source + edge.target + edge.data.relation
|
||||
);
|
||||
return edges.filter((edge) =>
|
||||
adjacencyList.includes(edge.target + edge.source + edge.data.relation)
|
||||
);
|
||||
}
|
||||
//const matches = useMemo(() => findMatches(data.edges), [])
|
||||
|
||||
function colorMatches(mutuality: boolean) {
|
||||
const matches = findMatches(data.edges);
|
||||
const newEdges = data.edges;
|
||||
if (mutuality) {
|
||||
newEdges.forEach((edge) => {
|
||||
if (
|
||||
(likes === 1 || edge.data.relation === likes) &&
|
||||
matches.map((edge) => edge.id).includes(edge.id)
|
||||
) {
|
||||
edge.fill = "#9c3";
|
||||
if (edge.size) edge.size = edge.size * 1.5;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
newEdges.forEach((edge) => {
|
||||
if (
|
||||
(likes === 1 || edge.data.relation === likes) &&
|
||||
matches.map((edge) => edge.id).includes(edge.id)
|
||||
) {
|
||||
edge.fill = edge.data.origFill;
|
||||
edge.size = edge.data.origSize;
|
||||
}
|
||||
});
|
||||
}
|
||||
setData({ nodes: data.nodes, edges: newEdges });
|
||||
}
|
||||
|
||||
function popularityLabel(popularity: boolean) {
|
||||
const newNodes = data.nodes;
|
||||
console.log(data.nodes);
|
||||
if (popularity) {
|
||||
newNodes.forEach(
|
||||
(node) => (node.subLabel = `pop.: ${node.data.inDegree.toFixed(1)}`)
|
||||
);
|
||||
} else {
|
||||
newNodes.forEach((node) => (node.subLabel = undefined));
|
||||
}
|
||||
setData({ nodes: newNodes, edges: data.edges });
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (mutuality) colorMatches(false);
|
||||
colorMatches(mutuality);
|
||||
}, [likes]);
|
||||
|
||||
const {
|
||||
selections,
|
||||
actives,
|
||||
onNodeClick,
|
||||
onCanvasClick,
|
||||
onNodePointerOver,
|
||||
onNodePointerOut,
|
||||
} = useCustomSelection({
|
||||
ref: graphRef,
|
||||
nodes: data.nodes,
|
||||
edges: data.edges.filter((edge) => edge.data.relation === likes),
|
||||
ignore: data.edges.map((edge) => {
|
||||
if (likes === 1 && edge.data.relation !== 2) return edge;
|
||||
}),
|
||||
pathSelectionType: "out",
|
||||
pathHoverType: "in",
|
||||
type: "multiModifier",
|
||||
});
|
||||
|
||||
let content: ReactNode;
|
||||
if (loading) {
|
||||
content = <span className="loader" />;
|
||||
} else if (error) {
|
||||
content = <span>{error}</span>;
|
||||
} else {
|
||||
content = (
|
||||
<>
|
||||
<GraphCanvas
|
||||
draggable
|
||||
cameraMode={threed ? "rotate" : "pan"}
|
||||
layoutType={threed ? "forceDirected3d" : "forceDirected2d"}
|
||||
layoutOverrides={{
|
||||
nodeStrength: -200,
|
||||
linkDistance: 100,
|
||||
}}
|
||||
labelType="nodes"
|
||||
sizingType="attribute"
|
||||
sizingAttribute={popularity ? "inDegree" : undefined}
|
||||
ref={graphRef}
|
||||
theme={customTheme}
|
||||
nodes={data.nodes}
|
||||
edges={data.edges.filter(
|
||||
(edge) => edge.data.relation === likes || likes === 1
|
||||
)}
|
||||
selections={selections}
|
||||
actives={actives}
|
||||
onCanvasClick={onCanvasClick}
|
||||
onNodeClick={onNodeClick}
|
||||
onNodePointerOut={onNodePointerOut}
|
||||
onNodePointerOver={onNodePointerOver}
|
||||
/>
|
||||
<button
|
||||
className="infobutton"
|
||||
onClick={() => {
|
||||
const dialog = document.querySelector("dialog[id='InfoDialog']");
|
||||
(dialog as HTMLDialogElement).showModal();
|
||||
}}
|
||||
>
|
||||
info
|
||||
</button>
|
||||
|
||||
<dialog
|
||||
id="InfoDialog"
|
||||
style={{ textAlign: "left" }}
|
||||
onClick={(event) => {
|
||||
event.currentTarget.close();
|
||||
}}
|
||||
>
|
||||
scroll to zoom
|
||||
<br />
|
||||
<br />
|
||||
<b>hover</b>: show inbound links
|
||||
<br />
|
||||
<b>click</b>: show outward links
|
||||
<br />
|
||||
<br />
|
||||
multi-selection possible
|
||||
<br />
|
||||
with <i>Ctrl</i> or <i>Shift</i>
|
||||
<br />
|
||||
<br />
|
||||
drag to pan/rotate
|
||||
</dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ position: "absolute", top: 0, bottom: 0, left: 0, right: 0 }}>
|
||||
<div className="controls">
|
||||
<div className="control" onClick={handleMutuality}>
|
||||
<div className="switch">
|
||||
<input type="checkbox" checked={mutuality} onChange={() => {}} />
|
||||
<span className="slider round"></span>
|
||||
</div>
|
||||
<span>mutuality</span>
|
||||
</div>
|
||||
|
||||
<div className="control" onClick={handleThreed}>
|
||||
<span>2D</span>
|
||||
<div className="switch">
|
||||
<input type="checkbox" checked={threed} onChange={() => {}} />
|
||||
<span className="slider round"></span>
|
||||
</div>
|
||||
<span>3D</span>
|
||||
</div>
|
||||
|
||||
<div className="control">
|
||||
<div className="stack column">
|
||||
<datalist id="markers">
|
||||
<option value="0"></option>
|
||||
<option value="1"></option>
|
||||
<option value="2"></option>
|
||||
</datalist>
|
||||
<div id="three-slider">
|
||||
<label>😬</label>
|
||||
<input
|
||||
type="range"
|
||||
list="markers"
|
||||
min="0"
|
||||
max="2"
|
||||
step="1"
|
||||
width="16px"
|
||||
onChange={(evt) => setLikes(Number(evt.target.value))}
|
||||
/>
|
||||
<label>😍</label>
|
||||
</div>
|
||||
{showLabel()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="control" onClick={handlePopularity}>
|
||||
<div className="switch">
|
||||
<input type="checkbox" checked={popularity} onChange={() => {}} />
|
||||
<span className="slider round"></span>
|
||||
</div>
|
||||
<span>
|
||||
popularity<sup>*</sup>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{popularity && (
|
||||
<div
|
||||
style={{ position: "absolute", bottom: 0, right: "10px", zIndex: 10 }}
|
||||
>
|
||||
<span className="grey" style={{ fontSize: "70%" }}>
|
||||
<sup>*</sup>popularity meassured by rank-weighted in-degree
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{content}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
59
frontend/src/NetworkTheme.ts
Normal file
59
frontend/src/NetworkTheme.ts
Normal file
@@ -0,0 +1,59 @@
|
||||
import { Theme } from "reagraph";
|
||||
|
||||
export var customTheme: Theme = {
|
||||
canvas: {
|
||||
background: "aliceblue",
|
||||
},
|
||||
node: {
|
||||
fill: "#69F",
|
||||
activeFill: "#36C",
|
||||
opacity: 1,
|
||||
selectedOpacity: 1,
|
||||
inactiveOpacity: 0.333,
|
||||
label: {
|
||||
color: "#404040",
|
||||
stroke: "white",
|
||||
activeColor: "black",
|
||||
},
|
||||
subLabel: {
|
||||
color: "#404040",
|
||||
stroke: "white",
|
||||
activeColor: "black",
|
||||
},
|
||||
},
|
||||
lasso: {
|
||||
border: "1px solid #55aaff",
|
||||
background: "rgba(75, 160, 255, 0.1)",
|
||||
},
|
||||
ring: {
|
||||
fill: "#69F",
|
||||
activeFill: "#36C",
|
||||
},
|
||||
edge: {
|
||||
fill: "#bed4ff",
|
||||
activeFill: "#36C",
|
||||
opacity: 1,
|
||||
selectedOpacity: 1,
|
||||
inactiveOpacity: 0.333,
|
||||
label: {
|
||||
stroke: "#fff",
|
||||
color: "#2A6475",
|
||||
activeColor: "#1DE9AC",
|
||||
fontSize: 6,
|
||||
},
|
||||
},
|
||||
arrow: {
|
||||
fill: "#bed4ff",
|
||||
activeFill: "#36C",
|
||||
},
|
||||
cluster: {
|
||||
stroke: "#D8E6EA",
|
||||
opacity: 1,
|
||||
selectedOpacity: 1,
|
||||
inactiveOpacity: 0.1,
|
||||
label: {
|
||||
stroke: "#fff",
|
||||
color: "#2A6475",
|
||||
},
|
||||
},
|
||||
};
|
||||
103
frontend/src/RaceChart.tsx
Normal file
103
frontend/src/RaceChart.tsx
Normal file
@@ -0,0 +1,103 @@
|
||||
import { FC, useEffect, useState } from "react";
|
||||
import { PlayerRanking } from "./types";
|
||||
import { useSession } from "./Session";
|
||||
|
||||
interface RaceChartProps {
|
||||
playerRanks: PlayerRanking[];
|
||||
std: boolean;
|
||||
}
|
||||
|
||||
const determineNiceWidth = (width: number) => {
|
||||
const max = 1080;
|
||||
if (width >= max) return max;
|
||||
else if (width > 768) return width * 0.8;
|
||||
else return width * 0.96;
|
||||
};
|
||||
|
||||
const RaceChart: FC<RaceChartProps> = ({ playerRanks, std }) => {
|
||||
const [width, setWidth] = useState(determineNiceWidth(window.innerWidth));
|
||||
const height = (playerRanks.length + 1) * 40;
|
||||
const { players } = useSession();
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setWidth(determineNiceWidth(window.innerWidth));
|
||||
};
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => {
|
||||
window.removeEventListener("resize", handleResize);
|
||||
};
|
||||
}, []);
|
||||
const padding = 24;
|
||||
const gap = 8;
|
||||
const maxValue = Math.max(...playerRanks.map((player) => player.rank)) + 1;
|
||||
const barHeight = (height - 2 * padding) / playerRanks.length;
|
||||
const fontSize = Math.min(barHeight - 1.5 * gap, width / 22);
|
||||
|
||||
return (
|
||||
<svg width={width} height={height} id="RaceChartSVG">
|
||||
{playerRanks.map((playerRank, index) => (
|
||||
<rect
|
||||
key={String(index)}
|
||||
x={4}
|
||||
y={index * barHeight + padding}
|
||||
width={(1 - playerRank.rank / maxValue) * width}
|
||||
height={barHeight - gap} // subtract 2 for some spacing between bars
|
||||
fill="#36c"
|
||||
stroke="aliceblue"
|
||||
strokeWidth={4}
|
||||
paintOrder={"stroke fill"}
|
||||
/>
|
||||
))}
|
||||
|
||||
{playerRanks.map((playerRank, index) => {
|
||||
const player = players!.find((p) => p.id === playerRank.p_id);
|
||||
return (
|
||||
<g key={"group" + index}>
|
||||
<text
|
||||
key={index + "_name"}
|
||||
x={8}
|
||||
y={index * barHeight + barHeight / 2 + padding + gap / 2}
|
||||
width={(1 - playerRank.rank / maxValue) * width}
|
||||
height={barHeight - 8} // subtract 2 for some spacing between bars
|
||||
fontSize={fontSize}
|
||||
fill="aliceblue"
|
||||
stroke="#36c"
|
||||
strokeWidth={4}
|
||||
fontWeight={"bold"}
|
||||
paintOrder={"stroke fill"}
|
||||
fontFamily="monospace"
|
||||
style={{ whiteSpace: "pre" }}
|
||||
>
|
||||
{`${String(index + 1).padStart(2)}. ${player?.display_name}`}
|
||||
</text>
|
||||
<text
|
||||
key={index + "_value"}
|
||||
x={
|
||||
8 +
|
||||
(4 +
|
||||
Math.max(...players!.map((p, _) => p.display_name.length))) *
|
||||
fontSize *
|
||||
0.66
|
||||
}
|
||||
y={index * barHeight + barHeight / 2 + padding + gap / 2}
|
||||
width={(1 - playerRank.rank / maxValue) * width}
|
||||
height={barHeight - 8} // subtract 2 for some spacing between bars
|
||||
fontSize={0.8 * fontSize}
|
||||
fill="aliceblue"
|
||||
stroke="#36c"
|
||||
fontWeight={"bold"}
|
||||
fontFamily="monospace"
|
||||
strokeWidth={4}
|
||||
paintOrder={"stroke fill"}
|
||||
style={{ whiteSpace: "pre" }}
|
||||
>
|
||||
{`${String(playerRank.rank).padStart(5)} ± ${playerRank.std} N = ${playerRank.n}`}
|
||||
</text>
|
||||
</g>
|
||||
);
|
||||
})}
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
export default RaceChart;
|
||||
500
frontend/src/Rankings.tsx
Normal file
500
frontend/src/Rankings.tsx
Normal file
@@ -0,0 +1,500 @@
|
||||
import { ButtonHTMLAttributes, useEffect, useRef, useState } from "react";
|
||||
import { ReactSortable, ReactSortableProps } from "react-sortablejs";
|
||||
import { apiAuth, User } from "./api";
|
||||
import { TeamState, useSession } from "./Session";
|
||||
import { Chemistry, MVPRanking, PlayerType } from "./types";
|
||||
import TabController from "./TabController";
|
||||
|
||||
type PlayerListProps = Partial<ReactSortableProps<any>> & {
|
||||
orderedList?: boolean;
|
||||
gender?: boolean;
|
||||
};
|
||||
|
||||
function PlayerList(props: PlayerListProps) {
|
||||
const fmps = props.list?.filter((item) => item.gender === "fmp").length;
|
||||
return (
|
||||
<ReactSortable
|
||||
{...props}
|
||||
animation={200}
|
||||
swapThreshold={0.2}
|
||||
style={{ minHeight: props.list && props.list?.length < 1 ? 64 : 32 }}
|
||||
>
|
||||
{props.list &&
|
||||
props.list.map((item, index) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className={"item " + (props.gender ? item.gender : "")}
|
||||
>
|
||||
{props.orderedList
|
||||
? props.gender
|
||||
? index +
|
||||
1 -
|
||||
(item.gender !== "fmp" ? fmps! : 0) +
|
||||
". " +
|
||||
item.display_name
|
||||
: index + 1 + ". " + item.display_name
|
||||
: item.display_name}
|
||||
</div>
|
||||
))}
|
||||
</ReactSortable>
|
||||
);
|
||||
}
|
||||
|
||||
const LoadButton = (props: ButtonHTMLAttributes<HTMLButtonElement>) => {
|
||||
return (
|
||||
<button {...props} style={{ padding: "4px 16px" }}>
|
||||
🗃️ restore previous
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
const ClearButton = (props: ButtonHTMLAttributes<HTMLButtonElement>) => {
|
||||
return (
|
||||
<button {...props} style={{ padding: "4px 16px" }}>
|
||||
🗑️ start over
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
function filterSort(list: User[], ids: number[]): User[] {
|
||||
const objectMap = new Map(list.map((obj) => [obj.id, obj]));
|
||||
const filteredAndSortedObjects = ids
|
||||
.map((id) => objectMap.get(id))
|
||||
.filter((obj) => obj !== undefined);
|
||||
return filteredAndSortedObjects;
|
||||
}
|
||||
|
||||
interface PlayerInfoProps {
|
||||
user: User;
|
||||
teams: TeamState;
|
||||
players: User[];
|
||||
}
|
||||
|
||||
function ChemistryDnD({ user, teams, players }: PlayerInfoProps) {
|
||||
var otherPlayers = players.filter((player) => player.id !== user.id);
|
||||
const [playersLeft, setPlayersLeft] = useState<User[]>([]);
|
||||
const [playersMiddle, setPlayersMiddle] = useState<User[]>(otherPlayers);
|
||||
const [playersRight, setPlayersRight] = useState<User[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
handleGet();
|
||||
}, [players]);
|
||||
|
||||
const [dialog, setDialog] = useState("dialog");
|
||||
const dialogRef = useRef<HTMLDialogElement>(null);
|
||||
|
||||
async function handleSubmit() {
|
||||
if (dialogRef.current) dialogRef.current.showModal();
|
||||
setDialog("sending...");
|
||||
let left = playersLeft.map(({ id }) => id);
|
||||
let middle = playersMiddle.map(({ id }) => id);
|
||||
let right = playersRight.map(({ id }) => id);
|
||||
const data = {
|
||||
user: user.id,
|
||||
hate: left,
|
||||
undecided: middle,
|
||||
love: right,
|
||||
team: teams.activeTeam,
|
||||
};
|
||||
const response = await apiAuth("chemistry", data, "PUT");
|
||||
setDialog(response || "try sending again");
|
||||
}
|
||||
|
||||
async function handleGet() {
|
||||
setLoading(true);
|
||||
const data = await apiAuth(`chemistry/${teams.activeTeam}`, null, "GET");
|
||||
if (data.detail) {
|
||||
console.log(data.detail);
|
||||
setPlayersRight([]);
|
||||
setPlayersMiddle(otherPlayers);
|
||||
setPlayersLeft([]);
|
||||
} else {
|
||||
const chemistry = data as Chemistry;
|
||||
setPlayersLeft(filterSort(otherPlayers, chemistry.hate));
|
||||
setPlayersMiddle(
|
||||
otherPlayers.filter(
|
||||
(player) =>
|
||||
!chemistry.hate.includes(player.id) &&
|
||||
!chemistry.love.includes(player.id)
|
||||
)
|
||||
);
|
||||
setPlayersRight(filterSort(otherPlayers, chemistry.love));
|
||||
}
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<HeaderControl
|
||||
onLoad={handleGet}
|
||||
onClear={() => {
|
||||
setPlayersRight([]);
|
||||
setPlayersMiddle(otherPlayers);
|
||||
setPlayersLeft([]);
|
||||
}}
|
||||
/>
|
||||
{loading ? (
|
||||
<span className="loader" style={{ width: 300 }} />
|
||||
) : (
|
||||
<div className="container">
|
||||
<div className="box three">
|
||||
<h2>😬</h2>
|
||||
{playersLeft.length < 1 && (
|
||||
<span className="grey hint">
|
||||
drag people here that you'd rather not play with
|
||||
</span>
|
||||
)}
|
||||
<PlayerList
|
||||
list={playersLeft}
|
||||
setList={setPlayersLeft}
|
||||
group={"shared"}
|
||||
className="dragbox"
|
||||
/>
|
||||
</div>
|
||||
<div className="box three">
|
||||
<h2>🤷</h2>
|
||||
<PlayerList
|
||||
list={playersMiddle}
|
||||
setList={setPlayersMiddle}
|
||||
group={"shared"}
|
||||
className="middle dragbox"
|
||||
/>
|
||||
</div>
|
||||
<div className="box three">
|
||||
<h2>😍</h2>
|
||||
{playersRight.length < 1 && (
|
||||
<span className="grey hint">
|
||||
drag people here that you love playing with from best to ... ok
|
||||
</span>
|
||||
)}
|
||||
<PlayerList
|
||||
list={playersRight}
|
||||
setList={setPlayersRight}
|
||||
group={"shared"}
|
||||
className="dragbox"
|
||||
orderedList
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button className="submit wavering" onClick={() => handleSubmit()}>
|
||||
💾 <span className="submit_text">submit</span>
|
||||
</button>
|
||||
<dialog
|
||||
ref={dialogRef}
|
||||
id="ChemistryDialog"
|
||||
onClick={(event) => {
|
||||
event.currentTarget.close();
|
||||
}}
|
||||
>
|
||||
{dialog}
|
||||
</dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function TypeDnD({ user, teams, players }: PlayerInfoProps) {
|
||||
const [availablePlayers, setAvailablePlayers] = useState<User[]>(players);
|
||||
const [handlers, setHandlers] = useState<User[]>([]);
|
||||
const [combis, setCombis] = useState<User[]>([]);
|
||||
const [cutters, setCutters] = useState<User[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
handleGet();
|
||||
}, [players]);
|
||||
|
||||
const [dialog, setDialog] = useState("dialog");
|
||||
const dialogRef = useRef<HTMLDialogElement>(null);
|
||||
|
||||
async function handleSubmit() {
|
||||
if (dialogRef.current) dialogRef.current.showModal();
|
||||
setDialog("sending...");
|
||||
let handlerlist = handlers.map(({ id }) => id);
|
||||
let combilist = combis.map(({ id }) => id);
|
||||
let cutterlist = cutters.map(({ id }) => id);
|
||||
const data = {
|
||||
user: user.id,
|
||||
handlers: handlerlist,
|
||||
combis: combilist,
|
||||
cutters: cutterlist,
|
||||
team: teams.activeTeam,
|
||||
};
|
||||
const response = await apiAuth("playertype", data, "PUT");
|
||||
setDialog(response || "try sending again");
|
||||
}
|
||||
|
||||
async function handleGet() {
|
||||
setLoading(true);
|
||||
const data = await apiAuth(`playertype/${teams.activeTeam}`, null, "GET");
|
||||
if (data.detail) {
|
||||
console.log(data.detail);
|
||||
setAvailablePlayers(players);
|
||||
setHandlers([]);
|
||||
setCombis([]);
|
||||
setCutters([]);
|
||||
} else {
|
||||
const playertype = data as PlayerType;
|
||||
setAvailablePlayers(
|
||||
players.filter(
|
||||
(player) =>
|
||||
!playertype.handlers.includes(player.id) &&
|
||||
!playertype.combis.includes(player.id) &&
|
||||
!playertype.cutters.includes(player.id)
|
||||
)
|
||||
);
|
||||
setHandlers(filterSort(players, playertype.handlers));
|
||||
setCombis(filterSort(players, playertype.combis));
|
||||
setCutters(filterSort(players, playertype.cutters));
|
||||
}
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<HeaderControl
|
||||
onLoad={handleGet}
|
||||
onClear={() => {
|
||||
setAvailablePlayers(players);
|
||||
setHandlers([]);
|
||||
setCombis([]);
|
||||
setCutters([]);
|
||||
}}
|
||||
/>
|
||||
<div className="container">
|
||||
<div className="box one">
|
||||
<PlayerList
|
||||
list={availablePlayers}
|
||||
setList={setAvailablePlayers}
|
||||
group={"type-shared"}
|
||||
className="dragbox reservoir"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="box three">
|
||||
<h4>handler</h4>
|
||||
{handlers.length < 1 && (
|
||||
<span className="grey hint">
|
||||
drag people here that you like to see as handlers
|
||||
</span>
|
||||
)}
|
||||
<PlayerList
|
||||
list={handlers}
|
||||
setList={setHandlers}
|
||||
group={"type-shared"}
|
||||
className="dragbox"
|
||||
/>
|
||||
</div>
|
||||
<div className="box three">
|
||||
<h4>combi</h4>
|
||||
{combis.length < 1 && (
|
||||
<span className="grey hint">
|
||||
drag people here that switch between handling and cutting
|
||||
</span>
|
||||
)}
|
||||
<PlayerList
|
||||
list={combis}
|
||||
setList={setCombis}
|
||||
group={"type-shared"}
|
||||
className="middle dragbox"
|
||||
/>
|
||||
</div>
|
||||
<div className="box three">
|
||||
<h4>cutter</h4>
|
||||
{cutters.length < 1 && (
|
||||
<span className="grey hint">
|
||||
drag people here that you think are the best cutters
|
||||
</span>
|
||||
)}
|
||||
<PlayerList
|
||||
list={cutters}
|
||||
setList={setCutters}
|
||||
group={"type-shared"}
|
||||
className="dragbox"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button className="submit wavering" onClick={() => handleSubmit()}>
|
||||
💾 <span className="submit_text">submit</span>
|
||||
</button>
|
||||
<dialog
|
||||
ref={dialogRef}
|
||||
id="PlayerTypeDialog"
|
||||
onClick={(event) => {
|
||||
event.currentTarget.close();
|
||||
}}
|
||||
>
|
||||
{dialog}
|
||||
</dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function MVPDnD({ user, teams, players }: PlayerInfoProps) {
|
||||
const [availablePlayers, setAvailablePlayers] = useState<User[]>(players);
|
||||
const [rankedPlayers, setRankedPlayers] = useState<User[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [mixed, setMixed] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const activeTeam = teams.teams.find((team) => team.id == teams.activeTeam);
|
||||
activeTeam && setMixed(activeTeam.mixed);
|
||||
handleGet();
|
||||
}, [players]);
|
||||
|
||||
useEffect(() => {
|
||||
handleGet();
|
||||
// setMixedList(rankedPlayers);
|
||||
}, [mixed]);
|
||||
|
||||
const [dialog, setDialog] = useState("dialog");
|
||||
const dialogRef = useRef<HTMLDialogElement>(null);
|
||||
|
||||
async function handleSubmit() {
|
||||
if (dialogRef.current) dialogRef.current.showModal();
|
||||
setDialog("sending...");
|
||||
let mvps = rankedPlayers.map(({ id }) => id);
|
||||
const data = { user: user.id, mvps: mvps, team: teams.activeTeam };
|
||||
const response = await apiAuth("mvps", data, "PUT");
|
||||
response ? setDialog(response) : setDialog("try sending again");
|
||||
}
|
||||
|
||||
const setMixedList = (newList: User[]) =>
|
||||
mixed
|
||||
? setRankedPlayers(
|
||||
newList.sort((a, b) =>
|
||||
a.gender && b.gender ? a.gender.localeCompare(b.gender) : -1
|
||||
)
|
||||
)
|
||||
: setRankedPlayers(newList);
|
||||
|
||||
async function handleGet() {
|
||||
setLoading(true);
|
||||
const data = await apiAuth(`mvps/${teams.activeTeam}`, null, "GET");
|
||||
if (data.detail) {
|
||||
console.log(data.detail);
|
||||
setAvailablePlayers(players);
|
||||
setRankedPlayers([]);
|
||||
} else {
|
||||
const mvps = data as MVPRanking;
|
||||
setMixedList(filterSort(players, mvps.mvps));
|
||||
setAvailablePlayers(
|
||||
players.filter((user) => !mvps.mvps.includes(user.id))
|
||||
);
|
||||
}
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<HeaderControl
|
||||
onLoad={handleGet}
|
||||
onClear={() => {
|
||||
setAvailablePlayers(players);
|
||||
setRankedPlayers([]);
|
||||
}}
|
||||
/>
|
||||
{loading ? (
|
||||
<span className="loader" style={{ width: 300 }} />
|
||||
) : (
|
||||
<div className="container">
|
||||
<div className="box two">
|
||||
<h2>🥏🏃</h2>
|
||||
{availablePlayers.length < 1 && (
|
||||
<span className="grey hint">all sorted 👍</span>
|
||||
)}
|
||||
<PlayerList
|
||||
list={availablePlayers}
|
||||
setList={setAvailablePlayers}
|
||||
group={{
|
||||
name: "mvp-shared",
|
||||
}}
|
||||
className="dragbox"
|
||||
gender={mixed}
|
||||
/>
|
||||
</div>
|
||||
<div className="box two">
|
||||
<h1>🏆</h1>
|
||||
{rankedPlayers.length < 1 && (
|
||||
<span className="grey hint">
|
||||
carefully place as many of the <i>Most Valuable Players</i>{" "}
|
||||
(according to your humble opinion) in this box
|
||||
</span>
|
||||
)}
|
||||
<PlayerList
|
||||
list={rankedPlayers}
|
||||
setList={setMixedList}
|
||||
group={{
|
||||
name: "mvp-shared",
|
||||
}}
|
||||
className="dragbox"
|
||||
orderedList
|
||||
gender={mixed}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button className="submit wavering" onClick={() => handleSubmit()}>
|
||||
💾 <span className="submit_text">submit</span>
|
||||
</button>
|
||||
<dialog
|
||||
ref={dialogRef}
|
||||
id="MVPDialog"
|
||||
onClick={(event) => {
|
||||
event.currentTarget.close();
|
||||
}}
|
||||
>
|
||||
{dialog}
|
||||
</dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
interface HeaderControlProps {
|
||||
onLoad: () => void;
|
||||
onClear: () => void;
|
||||
}
|
||||
function HeaderControl({ onLoad, onClear }: HeaderControlProps) {
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<ClearButton onClick={onClear} />
|
||||
<LoadButton onClick={onLoad} />
|
||||
</div>
|
||||
<div>
|
||||
<span className="grey">
|
||||
assign as many or as few players as you want and don't forget to{" "}
|
||||
<b>submit</b> 💾 when you're done :)
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Rankings() {
|
||||
const { user, teams, players } = useSession();
|
||||
|
||||
const tabs = [
|
||||
{ id: "Chemistry", label: "🧪 Chemistry" },
|
||||
{ id: "Type", label: "🃏 Type" },
|
||||
{ id: "MVP", label: "🏆 MVP" },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
{user && teams && players ? (
|
||||
<TabController tabs={tabs}>
|
||||
<ChemistryDnD {...{ user, teams, players }} />
|
||||
<TypeDnD {...{ user, teams, players }} />
|
||||
<MVPDnD {...{ user, teams, players }} />
|
||||
</TabController>
|
||||
) : (
|
||||
<span className="loader" />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
139
frontend/src/Session.tsx
Normal file
139
frontend/src/Session.tsx
Normal file
@@ -0,0 +1,139 @@
|
||||
import {
|
||||
createContext,
|
||||
ReactNode,
|
||||
useContext,
|
||||
useEffect,
|
||||
useState,
|
||||
} from "react";
|
||||
import { apiAuth, currentUser, loadPlayers, logout, User } from "./api";
|
||||
import { Login } from "./Login";
|
||||
import Header from "./Header";
|
||||
import { Team } from "./types";
|
||||
|
||||
export interface SessionProviderProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export interface TeamState {
|
||||
teams: Team[];
|
||||
activeTeam: number;
|
||||
}
|
||||
|
||||
export interface Session {
|
||||
user: User | null;
|
||||
teams: TeamState | null;
|
||||
setTeams: (teams: TeamState) => void;
|
||||
players: User[] | null;
|
||||
reloadPlayers: () => void;
|
||||
onLogout: () => void;
|
||||
}
|
||||
|
||||
const sessionContext = createContext<Session>({
|
||||
user: null,
|
||||
teams: null,
|
||||
setTeams: () => {},
|
||||
players: null,
|
||||
reloadPlayers: () => {},
|
||||
onLogout: () => {},
|
||||
});
|
||||
|
||||
export function SessionProvider(props: SessionProviderProps) {
|
||||
const { children } = props;
|
||||
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [teams, setTeams] = useState<TeamState | null>(null);
|
||||
const [players, setPlayers] = useState<User[] | null>(null);
|
||||
const [err, setErr] = useState<unknown>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
function loadUser() {
|
||||
setLoading(true);
|
||||
currentUser()
|
||||
.then((user) => {
|
||||
setUser(user);
|
||||
setErr(null);
|
||||
})
|
||||
.catch((err) => {
|
||||
setUser(null);
|
||||
setErr(err);
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
}
|
||||
|
||||
async function loadTeam() {
|
||||
const teams: Team[] = await apiAuth("player/me/teams", null, "GET");
|
||||
if (teams) setTeams({ teams: teams, activeTeam: teams[0].id });
|
||||
}
|
||||
|
||||
async function reloadPlayers() {
|
||||
teams && loadPlayers(teams?.activeTeam).then((data) => setPlayers(data));
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
loadUser();
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
loadTeam();
|
||||
}, [user]);
|
||||
useEffect(() => {
|
||||
reloadPlayers();
|
||||
}, [teams]);
|
||||
|
||||
function onLogin(user: User) {
|
||||
setUser(user);
|
||||
setErr(null);
|
||||
}
|
||||
|
||||
async function onLogout() {
|
||||
try {
|
||||
logout();
|
||||
setUser(null);
|
||||
setErr({ message: "Logged out successfully" });
|
||||
console.log("logged out.");
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
setErr(e);
|
||||
}
|
||||
}
|
||||
|
||||
let content: ReactNode;
|
||||
if (loading || (!err && !user))
|
||||
content = (
|
||||
<>
|
||||
<Header />
|
||||
<span className="loader" />
|
||||
</>
|
||||
);
|
||||
else if (err) {
|
||||
content = (
|
||||
<section className="section is-medium">
|
||||
<div className="container is-max-tablet">
|
||||
<div className="block">
|
||||
<p className="level-item has-text-centered">
|
||||
<img
|
||||
className="image"
|
||||
alt="cool ultimate team tool"
|
||||
src="cutt.svg"
|
||||
style={{ width: 200 }}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<Login onLogin={onLogin} />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
} else
|
||||
content = (
|
||||
<sessionContext.Provider
|
||||
value={{ user, teams, setTeams, players, reloadPlayers, onLogout }}
|
||||
>
|
||||
{children}
|
||||
</sessionContext.Provider>
|
||||
);
|
||||
|
||||
return content;
|
||||
}
|
||||
|
||||
export function useSession() {
|
||||
return useContext(sessionContext);
|
||||
}
|
||||
355
frontend/src/SetPassword.tsx
Normal file
355
frontend/src/SetPassword.tsx
Normal file
@@ -0,0 +1,355 @@
|
||||
import { jwtDecode, JwtPayload } from "jwt-decode";
|
||||
import { ReactNode, useEffect, useState } from "react";
|
||||
import { apiAuth, baseUrl, Gender, User } from "./api";
|
||||
import { useNavigate } from "react-router";
|
||||
import { Eye, EyeSlash } from "./Icons";
|
||||
import { useSession } from "./Session";
|
||||
import { relative } from "path";
|
||||
import Header from "./Header";
|
||||
|
||||
interface PassToken extends JwtPayload {
|
||||
username: string;
|
||||
name: string;
|
||||
team_id: number;
|
||||
}
|
||||
|
||||
enum Mode {
|
||||
register = "register",
|
||||
set = "set password",
|
||||
change = "change password",
|
||||
}
|
||||
|
||||
export const SetPassword = () => {
|
||||
const [mode, setMode] = useState<Mode>();
|
||||
const [name, setName] = useState("after getting your token.");
|
||||
const [username, setUsername] = useState("");
|
||||
const [teamID, setTeamID] = useState<number>();
|
||||
const [currentPassword, setCurrentPassword] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [passwordr, setPasswordr] = useState("");
|
||||
const [token, setToken] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [visible, setVisible] = useState(false);
|
||||
const newPlayerTemplate = {
|
||||
username: "",
|
||||
display_name: "",
|
||||
number: "",
|
||||
email: "",
|
||||
} as User;
|
||||
const [player, setPlayer] = useState(newPlayerTemplate);
|
||||
const navigate = useNavigate();
|
||||
const { user } = useSession();
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (password === passwordr) {
|
||||
setLoading(true);
|
||||
if (mode === Mode.change) {
|
||||
//====CHANGING PASSWORD====
|
||||
const resp = await apiAuth(
|
||||
"player/change_password",
|
||||
{ current_password: currentPassword, new_password: password },
|
||||
"POST"
|
||||
);
|
||||
setLoading(false);
|
||||
if (resp.detail) setError(resp.detail);
|
||||
else {
|
||||
setError(resp);
|
||||
setTimeout(() => navigate("/"), 2000);
|
||||
}
|
||||
} else if (mode === Mode.set) {
|
||||
//====SETTING PASSWORD====
|
||||
const req = new Request(`${baseUrl}api/set_password`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ token: token, password: password }),
|
||||
});
|
||||
let resp: Response;
|
||||
try {
|
||||
resp = await fetch(req);
|
||||
} catch (e) {
|
||||
throw new Error(`request failed: ${e}`);
|
||||
}
|
||||
setLoading(false);
|
||||
|
||||
if (resp.ok) {
|
||||
console.log(resp);
|
||||
navigate("/", {
|
||||
replace: true,
|
||||
state: { username: username, password: password },
|
||||
});
|
||||
}
|
||||
|
||||
if (!resp.ok) {
|
||||
if (resp.status === 401) {
|
||||
const { detail } = await resp.json();
|
||||
if (detail) setError(detail);
|
||||
else setError("unauthorized");
|
||||
throw new Error("Unauthorized");
|
||||
}
|
||||
}
|
||||
} else if (mode === Mode.register) {
|
||||
//====REGISTER NEW USER====
|
||||
const req = new Request(`${baseUrl}api/register`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
...player,
|
||||
team_id: teamID,
|
||||
token: token,
|
||||
password: password,
|
||||
}),
|
||||
});
|
||||
let resp: Response;
|
||||
try {
|
||||
resp = await fetch(req);
|
||||
} catch (e) {
|
||||
throw new Error(`request failed: ${e}`);
|
||||
}
|
||||
setLoading(false);
|
||||
|
||||
if (resp.ok) {
|
||||
console.log(resp);
|
||||
navigate("/", {
|
||||
replace: true,
|
||||
state: { username: player.username, password: password },
|
||||
});
|
||||
}
|
||||
|
||||
if (!resp.ok) {
|
||||
const { detail } = await resp.json();
|
||||
if (detail) setError(detail);
|
||||
else setError("unauthorized");
|
||||
throw new Error("Unauthorized");
|
||||
}
|
||||
}
|
||||
} else setError("passwords are not the same");
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
setUsername(user.username);
|
||||
setName(user.display_name);
|
||||
setMode(Mode.change);
|
||||
} else {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const token = params.get("token");
|
||||
if (token) {
|
||||
setToken(token);
|
||||
try {
|
||||
const payload = jwtDecode<PassToken>(token);
|
||||
console.log(payload);
|
||||
switch (payload.sub) {
|
||||
case "register":
|
||||
setMode(Mode.register);
|
||||
if (payload.team_id) setTeamID(payload.team_id);
|
||||
break;
|
||||
case "set password":
|
||||
setMode(Mode.set);
|
||||
if (payload.username) setUsername(payload.username);
|
||||
break;
|
||||
}
|
||||
if (payload.name) setName(payload.name);
|
||||
} catch (InvalidTokenError) {
|
||||
setName("Mr. I-have-no-valid Token");
|
||||
}
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
let header: ReactNode;
|
||||
switch (mode) {
|
||||
case Mode.change:
|
||||
header = <h2>change your password, {name}</h2>;
|
||||
break;
|
||||
case Mode.set:
|
||||
header = (
|
||||
<>
|
||||
<Header />
|
||||
<h2>set your password, {name}</h2>
|
||||
</>
|
||||
);
|
||||
break;
|
||||
case Mode.register:
|
||||
header = (
|
||||
<>
|
||||
<Header />
|
||||
<h2>
|
||||
register as a member of <i>{name}</i>
|
||||
</h2>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
let textInputs: ReactNode;
|
||||
switch (mode) {
|
||||
case Mode.change:
|
||||
textInputs = (
|
||||
<div>
|
||||
<input
|
||||
type={visible ? "text" : "password"}
|
||||
id="password"
|
||||
name="password"
|
||||
placeholder="current password"
|
||||
minLength={8}
|
||||
value={currentPassword}
|
||||
required
|
||||
onChange={(evt) => {
|
||||
setError("");
|
||||
setCurrentPassword(evt.target.value);
|
||||
}}
|
||||
/>
|
||||
<hr style={{ margin: "8px" }} />
|
||||
</div>
|
||||
);
|
||||
break;
|
||||
case Mode.register:
|
||||
textInputs = (
|
||||
<div className="new-player-inputs">
|
||||
<div>
|
||||
<label>name</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={player.display_name}
|
||||
onChange={(e) => {
|
||||
setPlayer({
|
||||
...player,
|
||||
display_name: e.target.value,
|
||||
username: e.target.value.toLowerCase().replace(/\W/g, ""),
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label>username</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={player.username}
|
||||
onChange={(e) => {
|
||||
setPlayer({ ...player, username: e.target.value });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label>gender</label>
|
||||
<select
|
||||
name="gender"
|
||||
required
|
||||
value={player.gender}
|
||||
onChange={(e) => {
|
||||
setPlayer({ ...player, gender: e.target.value as Gender });
|
||||
}}
|
||||
>
|
||||
<option value={undefined}></option>
|
||||
<option value="fmp">FMP</option>
|
||||
<option value="mmp">MMP</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label>number (optional)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={player.number || ""}
|
||||
onChange={(e) => {
|
||||
setPlayer({ ...player, number: e.target.value });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label>email (optional)</label>
|
||||
<input
|
||||
type="email"
|
||||
value={player.email || ""}
|
||||
onChange={(e) => {
|
||||
setPlayer({ ...player, email: e.target.value });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<hr style={{ margin: "8px" }} />
|
||||
</div>
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
let passwordInputs = (
|
||||
<>
|
||||
<div>
|
||||
<input
|
||||
type={visible ? "text" : "password"}
|
||||
id="password"
|
||||
name="password"
|
||||
placeholder="password"
|
||||
minLength={8}
|
||||
value={password}
|
||||
required
|
||||
onChange={(evt) => {
|
||||
setError("");
|
||||
setPassword(evt.target.value);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type={visible ? "text" : "password"}
|
||||
id="password-repeat"
|
||||
name="password-repeat"
|
||||
placeholder="repeat password"
|
||||
minLength={8}
|
||||
value={passwordr}
|
||||
required
|
||||
onChange={(evt) => {
|
||||
setError("");
|
||||
setPasswordr(evt.target.value);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
return mode ? (
|
||||
<>
|
||||
{header}
|
||||
<hr style={{ width: "100%" }} />
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
{textInputs}
|
||||
{passwordInputs}
|
||||
<div
|
||||
style={{
|
||||
background: "unset",
|
||||
fontSize: "medium",
|
||||
cursor: "pointer",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "8px",
|
||||
}}
|
||||
onClick={() => setVisible(!visible)}
|
||||
>
|
||||
{visible ? <Eye /> : <EyeSlash />} show passwords
|
||||
</div>
|
||||
</div>
|
||||
<div>{error && <span style={{ color: "red" }}>{error}</span>}</div>
|
||||
<button type="submit" value="login" style={{ fontSize: "small" }}>
|
||||
submit
|
||||
</button>
|
||||
{loading && <span className="loader" />}
|
||||
</form>
|
||||
</>
|
||||
) : (
|
||||
<span className="loader" />
|
||||
);
|
||||
};
|
||||
41
frontend/src/TabController.tsx
Normal file
41
frontend/src/TabController.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import { Fragment, ReactNode, useState } from "react";
|
||||
|
||||
interface TabProps {
|
||||
id: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface TabControllerProps {
|
||||
tabs: TabProps[];
|
||||
children: ReactNode[];
|
||||
}
|
||||
|
||||
export default function TabController({ tabs, children }: TabControllerProps) {
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
const handleTabClick = (index: number) => {
|
||||
setCurrentIndex(index);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="block">
|
||||
<div className="tabs is-boxed is-centered">
|
||||
<ul>
|
||||
{tabs.map((tab, index) => (
|
||||
<li className={currentIndex === index ? "is-active" : ""}>
|
||||
<a onClick={() => handleTabClick(index)}>{tab.label}</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
{children.map((child, index) => (
|
||||
<Fragment key={index}>
|
||||
<div style={{ display: currentIndex === index ? "block" : "none" }}>
|
||||
{child}
|
||||
</div>
|
||||
</Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
224
frontend/src/TeamPanel.tsx
Normal file
224
frontend/src/TeamPanel.tsx
Normal file
@@ -0,0 +1,224 @@
|
||||
import { FormEvent, useEffect, useState } from "react";
|
||||
import { apiAuth, Gender, User } from "./api";
|
||||
import { useSession } from "./Session";
|
||||
import { ErrorState } from "./types";
|
||||
import { useNavigate } from "react-router";
|
||||
import Calendar from "./Calendar";
|
||||
|
||||
const TeamPanel = () => {
|
||||
const { user, teams, players, reloadPlayers } = useSession();
|
||||
const navigate = useNavigate();
|
||||
useEffect(() => {
|
||||
user?.scopes.includes(`team:${teams?.activeTeam}`) ||
|
||||
teams?.activeTeam === 42 ||
|
||||
navigate("/", { replace: true });
|
||||
}, [user, teams]);
|
||||
const newPlayerTemplate = {
|
||||
id: 0,
|
||||
username: "",
|
||||
display_name: "",
|
||||
gender: undefined,
|
||||
number: "",
|
||||
email: "",
|
||||
} as User;
|
||||
const [error, setError] = useState<ErrorState>();
|
||||
const [player, setPlayer] = useState(newPlayerTemplate);
|
||||
|
||||
async function handleSubmit(e: FormEvent) {
|
||||
e.preventDefault();
|
||||
if (teams) {
|
||||
if (player.id === 0) {
|
||||
const r = await apiAuth(`player/${teams?.activeTeam}`, player, "POST");
|
||||
if (r.detail) setError({ ok: false, message: r.detail });
|
||||
else {
|
||||
setError({ ok: true, message: r });
|
||||
reloadPlayers();
|
||||
}
|
||||
} else {
|
||||
const r = await apiAuth(`player/${teams?.activeTeam}`, player, "PUT");
|
||||
if (r.detail) setError({ ok: false, message: r.detail });
|
||||
else {
|
||||
setError({ ok: true, message: r });
|
||||
reloadPlayers();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDisable(e: FormEvent) {
|
||||
e.preventDefault();
|
||||
if (teams && player.id !== 0) {
|
||||
var confirmation = confirm("are you sure?");
|
||||
if (confirmation) {
|
||||
const r = await apiAuth(
|
||||
`player/${teams?.activeTeam}`,
|
||||
{ player_id: player.id },
|
||||
"DELETE"
|
||||
);
|
||||
if (r.detail) setError({ ok: false, message: r.detail });
|
||||
else {
|
||||
setError({ ok: true, message: r });
|
||||
setPlayer(newPlayerTemplate);
|
||||
reloadPlayers();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (teams && players) {
|
||||
const activeTeam = teams.teams.filter(
|
||||
(team) => team.id == teams?.activeTeam
|
||||
)[0];
|
||||
return (
|
||||
<div className="team-panel">
|
||||
<h1>{activeTeam.name}</h1>
|
||||
<div>
|
||||
<input type="text" value={activeTeam.location || ""} disabled />
|
||||
<br />
|
||||
<input type="text" value={activeTeam.country || ""} disabled />
|
||||
<hr style={{ width: "100%" }} />
|
||||
|
||||
<h2>players</h2>
|
||||
{players ? (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
{players.map((p) => (
|
||||
<button
|
||||
className={
|
||||
"team-player " +
|
||||
p.gender +
|
||||
(p.id === player.id ? " active-player" : "")
|
||||
}
|
||||
key={p.id}
|
||||
onClick={() => {
|
||||
setPlayer(p);
|
||||
setError({ ok: true, message: "" });
|
||||
}}
|
||||
>
|
||||
{p.display_name}
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
className="team-player new-player"
|
||||
key="add-player"
|
||||
onClick={() => {
|
||||
setPlayer(newPlayerTemplate);
|
||||
setError({ ok: true, message: "" });
|
||||
}}
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<span className="loader" />
|
||||
)}
|
||||
<hr style={{ width: "100%" }} />
|
||||
|
||||
<form className="new-player-inputs" onSubmit={handleSubmit}>
|
||||
<div>
|
||||
<label>name</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={player.display_name}
|
||||
onChange={(e) => {
|
||||
setPlayer({
|
||||
...player,
|
||||
...(player.id === 0 && {
|
||||
username: e.target.value.toLowerCase().replace(/\W/g, ""),
|
||||
}),
|
||||
display_name: e.target.value,
|
||||
});
|
||||
setError({ ok: true, message: "" });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label>username</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
disabled={player.id !== 0}
|
||||
value={player.username}
|
||||
onChange={(e) => {
|
||||
setPlayer({ ...player, username: e.target.value });
|
||||
setError({ ok: true, message: "" });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label>gender</label>
|
||||
<select
|
||||
name="gender"
|
||||
value={player.gender}
|
||||
onChange={(e) => {
|
||||
setPlayer({ ...player, gender: e.target.value as Gender });
|
||||
setError({ ok: true, message: "" });
|
||||
}}
|
||||
>
|
||||
<option value={undefined}></option>
|
||||
<option value="fmp">FMP</option>
|
||||
<option value="mmp">MMP</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label>number (optional)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={player.number || ""}
|
||||
onChange={(e) => {
|
||||
setPlayer({ ...player, number: e.target.value });
|
||||
setError({ ok: true, message: "" });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label>email (optional)</label>
|
||||
<input
|
||||
type="email"
|
||||
value={player.email || ""}
|
||||
onChange={(e) => {
|
||||
setPlayer({ ...player, email: e.target.value });
|
||||
setError({ ok: true, message: "" });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ margin: "auto" }}>
|
||||
{error?.message && (
|
||||
<span
|
||||
style={{
|
||||
color: error.ok ? "green" : "red",
|
||||
}}
|
||||
>
|
||||
{error.message}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ margin: "auto" }}>
|
||||
<button className="team-player new-player">
|
||||
{player.id === 0 ? "add player" : "modify player"}
|
||||
</button>
|
||||
</div>
|
||||
{player.id !== 0 && (
|
||||
<div style={{ margin: "auto" }}>
|
||||
<button
|
||||
className="team-player disable-player"
|
||||
onClick={handleDisable}
|
||||
>
|
||||
remove player
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
<Calendar playerId={player.id} />
|
||||
</div>
|
||||
);
|
||||
} else <span className="loader" />;
|
||||
};
|
||||
export default TeamPanel;
|
||||
49
frontend/src/ThemeProvider.tsx
Normal file
49
frontend/src/ThemeProvider.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import { normalTheme, Theme } from "./themes";
|
||||
import {
|
||||
createContext,
|
||||
ReactNode,
|
||||
useContext,
|
||||
useEffect,
|
||||
useState,
|
||||
} from "react";
|
||||
|
||||
interface ThemeContextProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
interface ThemeContextValue {
|
||||
theme: Theme;
|
||||
setTheme: (theme: Theme) => void;
|
||||
}
|
||||
|
||||
const themeContext = createContext<ThemeContextValue>({
|
||||
theme: normalTheme,
|
||||
setTheme: () => {},
|
||||
});
|
||||
|
||||
const ThemeProvider = ({ children }: ThemeContextProps) => {
|
||||
const [theme, setTheme] = useState(normalTheme);
|
||||
useEffect(() => {
|
||||
if (theme.backgroundColor) {
|
||||
document.body.style.backgroundColor = theme.backgroundColor;
|
||||
document.body.style.backgroundImage = "unset";
|
||||
} else if (theme.backgroundImage) {
|
||||
document.body.style.backgroundColor = "unset";
|
||||
document.body.style.backgroundImage = theme.backgroundImage;
|
||||
}
|
||||
document.body.style.color = theme.textColor;
|
||||
document.body.style.borderColor = theme.textColor;
|
||||
}, [theme]);
|
||||
|
||||
return (
|
||||
<themeContext.Provider value={{ theme, setTheme }}>
|
||||
{children}
|
||||
</themeContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
function useTheme() {
|
||||
return useContext(themeContext);
|
||||
}
|
||||
|
||||
export { ThemeProvider, useTheme };
|
||||
125
frontend/src/api.ts
Normal file
125
frontend/src/api.ts
Normal file
@@ -0,0 +1,125 @@
|
||||
import { useSession } from "./Session";
|
||||
|
||||
export const baseUrl = import.meta.env.VITE_BASE_URL as string;
|
||||
|
||||
export async function apiAuth(
|
||||
path: string,
|
||||
data: any,
|
||||
method: string = "GET"
|
||||
): Promise<any> {
|
||||
const req = new Request(`${baseUrl}api/${path}`, {
|
||||
method: method,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
credentials: "include",
|
||||
...(data && { body: JSON.stringify(data) }),
|
||||
});
|
||||
let resp: Response;
|
||||
try {
|
||||
resp = await fetch(req);
|
||||
} catch (e) {
|
||||
throw new Error(`request failed: ${e}`);
|
||||
}
|
||||
|
||||
if (!resp.ok) {
|
||||
if (resp.status === 401) {
|
||||
const { onLogout } = useSession();
|
||||
onLogout();
|
||||
throw new Error("Unauthorized");
|
||||
}
|
||||
}
|
||||
const contentType = resp.headers.get("Content-Type");
|
||||
switch (contentType) {
|
||||
case "application/json":
|
||||
return resp.json();
|
||||
case "text/plain":
|
||||
case "text/plain; charset=utf-8":
|
||||
return resp.text();
|
||||
case null:
|
||||
return null;
|
||||
default:
|
||||
throw new Error(`Unsupported content type: ${contentType}`);
|
||||
}
|
||||
}
|
||||
|
||||
export type Gender = "fmp" | "mmp" | undefined;
|
||||
|
||||
export type User = {
|
||||
id: number;
|
||||
username: string;
|
||||
display_name: string;
|
||||
email: string;
|
||||
number: string;
|
||||
gender: Gender;
|
||||
scopes: string;
|
||||
};
|
||||
|
||||
export async function currentUser(): Promise<User> {
|
||||
const req = new Request(`${baseUrl}api/player/me`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
credentials: "include",
|
||||
});
|
||||
let resp: Response;
|
||||
try {
|
||||
resp = await fetch(req);
|
||||
} catch (e) {
|
||||
throw new Error(`request failed: ${e}`);
|
||||
}
|
||||
|
||||
if (!resp.ok) {
|
||||
if (resp.status === 401) {
|
||||
logout();
|
||||
throw new Error("Unauthorized");
|
||||
}
|
||||
}
|
||||
return resp.json() as Promise<User>;
|
||||
}
|
||||
|
||||
export async function loadPlayers(teamId: number) {
|
||||
try {
|
||||
const data = await apiAuth(`player/${teamId}/list`, null, "GET");
|
||||
return data as User[];
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export type LoginRequest = {
|
||||
username: string;
|
||||
password: string;
|
||||
};
|
||||
|
||||
export const login = async (req: LoginRequest): Promise<void> => {
|
||||
try {
|
||||
const response = await fetch(`${baseUrl}api/token`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded",
|
||||
},
|
||||
body: new URLSearchParams(req).toString(),
|
||||
credentials: "include",
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
throw e; // rethrow the error so it can be caught by the caller
|
||||
}
|
||||
};
|
||||
|
||||
export const logout = async () => {
|
||||
try {
|
||||
await fetch(`${baseUrl}api/logout`, {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
});
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
};
|
||||
68
frontend/src/index.css
Normal file
68
frontend/src/index.css
Normal file
@@ -0,0 +1,68 @@
|
||||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
17
frontend/src/main.css
Normal file
17
frontend/src/main.css
Normal file
@@ -0,0 +1,17 @@
|
||||
@import "bulma/css/bulma.css";
|
||||
|
||||
:root {
|
||||
--bulma-primary-h: 220deg;
|
||||
--bulma-primary-s: 60%;
|
||||
--bulma-primary-l: 50%;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
--bulma-navbar-burger-color: var(--bulma-white);
|
||||
--bulma-navbar-dropdown-border-color: var(--bulma-primary);
|
||||
}
|
||||
|
||||
.overflow-y {
|
||||
overflow-y: auto;
|
||||
max-height: 30vh;
|
||||
}
|
||||
9
frontend/src/main.tsx
Normal file
9
frontend/src/main.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import App from "./CUTT.tsx";
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>
|
||||
);
|
||||
24
frontend/src/themes.ts
Normal file
24
frontend/src/themes.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
export interface Theme {
|
||||
backgroundColor?: string;
|
||||
backgroundImage?: string;
|
||||
textColor: string;
|
||||
}
|
||||
|
||||
export const normalTheme: Theme = {
|
||||
backgroundColor: "aliceblue",
|
||||
textColor: "black",
|
||||
};
|
||||
export const darkTheme: Theme = {
|
||||
backgroundColor: "#444",
|
||||
textColor: "white",
|
||||
};
|
||||
export const colourTheme: Theme = {
|
||||
backgroundImage:
|
||||
"linear-gradient(45deg, magenta, rebeccapurple, dodgerblue, green)",
|
||||
textColor: "white",
|
||||
};
|
||||
export const rainbowTheme: Theme = {
|
||||
backgroundImage:
|
||||
"linear-gradient(135deg, #FF0000, #FFA500, #888800, #008000, #0000FF, #4B0082, #800080 ",
|
||||
textColor: "white",
|
||||
};
|
||||
55
frontend/src/types.ts
Normal file
55
frontend/src/types.ts
Normal file
@@ -0,0 +1,55 @@
|
||||
export interface Edge {
|
||||
from: string;
|
||||
to: string;
|
||||
color: string;
|
||||
relation: "likes" | "dislikes";
|
||||
}
|
||||
export interface Node {
|
||||
id: string;
|
||||
}
|
||||
export default interface NetworkData {
|
||||
nodes: Node[];
|
||||
edges: Edge[];
|
||||
}
|
||||
|
||||
export interface PlayerRanking {
|
||||
p_id: number;
|
||||
rank: number;
|
||||
std: number;
|
||||
n: number;
|
||||
}
|
||||
|
||||
export interface Chemistry {
|
||||
id: number;
|
||||
user: number;
|
||||
hate: number[];
|
||||
undecided: number[];
|
||||
love: number[];
|
||||
}
|
||||
|
||||
export interface PlayerType {
|
||||
id: number;
|
||||
user: number;
|
||||
handlers: number[];
|
||||
combis: number[];
|
||||
cutters: number[];
|
||||
}
|
||||
|
||||
export interface MVPRanking {
|
||||
id: number;
|
||||
user: number;
|
||||
mvps: number[];
|
||||
}
|
||||
|
||||
export interface Team {
|
||||
id: number;
|
||||
name: string;
|
||||
location: string;
|
||||
country: string;
|
||||
mixed: boolean;
|
||||
}
|
||||
|
||||
export type ErrorState = {
|
||||
ok: boolean;
|
||||
message: string;
|
||||
};
|
||||
1
frontend/src/vite-env.d.ts
vendored
Normal file
1
frontend/src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
30
frontend/tsconfig.app.json
Normal file
30
frontend/tsconfig.app.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": [
|
||||
"ES2020",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": false,
|
||||
"noUnusedParameters": false,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
]
|
||||
}
|
||||
7
frontend/tsconfig.json
Normal file
7
frontend/tsconfig.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
26
frontend/tsconfig.node.json
Normal file
26
frontend/tsconfig.node.json
Normal file
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2022",
|
||||
"lib": [
|
||||
"ES2023"
|
||||
],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": [
|
||||
"vite.config.ts"
|
||||
]
|
||||
}
|
||||
7
frontend/vite.config.ts
Normal file
7
frontend/vite.config.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
Reference in New Issue
Block a user