feat: choose user once at the beginning
This commit is contained in:
parent
3b33b1ca44
commit
31e29de4cd
GPG Key ID:
C80A63E6A5FD7092
18
src/App.css
18
src/App.css
@ -48,15 +48,26 @@ h2 {
|
||||
height: 92%;
|
||||
}
|
||||
|
||||
.reservoir {
|
||||
flex-direction: unset;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: relative;
|
||||
&.one {
|
||||
max-width: min(80vw, 500px);
|
||||
}
|
||||
&.two {
|
||||
min-width: 43%;
|
||||
max-width: 20vw;
|
||||
}
|
||||
&.three {
|
||||
min-width: 27%;
|
||||
max-width: 10vw;
|
||||
}
|
||||
max-width: 10vw;
|
||||
padding: 4px;
|
||||
margin: 4px auto;
|
||||
border-style: solid;
|
||||
@ -82,6 +93,10 @@ h2 {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.extra-margin {
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
button {
|
||||
font-weight: bold;
|
||||
color: ghostwhite;
|
||||
@ -120,7 +135,6 @@ button {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
|
||||
/* Style the tab content (and add height:100% for full page content) */
|
||||
.tabcontent {
|
||||
display: none;
|
||||
|
||||
54
src/App.tsx
54
src/App.tsx
@ -1,63 +1,13 @@
|
||||
import "./App.css";
|
||||
import { Chemistry, MVP } from "./Rankings";
|
||||
import Rankings from "./Rankings";
|
||||
|
||||
function App() {
|
||||
function openPage(pageName: string, color: string) {
|
||||
// Hide all elements with class="tabcontent" by default */
|
||||
var i, tabcontent, tablinks;
|
||||
tabcontent = document.getElementsByClassName("tabcontent");
|
||||
for (i = 0; i < tabcontent.length; i++) {
|
||||
(tabcontent[i] as HTMLElement).style.display = "none";
|
||||
}
|
||||
// Remove the background color of all tablinks/buttons
|
||||
tablinks = document.getElementsByClassName("tablink");
|
||||
for (i = 0; i < tablinks.length; i++) {
|
||||
let button = tablinks[i] as HTMLElement;
|
||||
button.style.backgroundColor = "unset";
|
||||
button.style.textDecoration = "unset";
|
||||
button.style.fontWeight = "unset";
|
||||
button.style.color = "unset";
|
||||
}
|
||||
// Show the specific tab content
|
||||
(document.getElementById(pageName) as HTMLElement).style.display = "block";
|
||||
// Add the specific color to the button used to open the tab content
|
||||
let activeButton = document.getElementById(
|
||||
pageName + "Button"
|
||||
) as HTMLElement;
|
||||
activeButton.style.textDecoration = "underline";
|
||||
activeButton.style.fontWeight = "bold";
|
||||
activeButton.style.backgroundColor = "#3366cc";
|
||||
activeButton.style.color = "white";
|
||||
document.body.style.backgroundColor = color;
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<img alt="logo" height="128px" src="logo.svg" />
|
||||
<h1>cutt</h1>
|
||||
<span className="grey">cool ultimate team tool</span>
|
||||
<div className="container">
|
||||
<button
|
||||
className="tablink"
|
||||
id="ChemistryButton"
|
||||
onClick={() => openPage("Chemistry", "aliceblue")}
|
||||
>
|
||||
Chemistry
|
||||
</button>
|
||||
<button
|
||||
className="tablink"
|
||||
id="MVPButton"
|
||||
onClick={() => openPage("MVP", "aliceblue")}
|
||||
>
|
||||
MVP
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="Chemistry" className="tabcontent">
|
||||
<Chemistry />
|
||||
</div>
|
||||
<div id="MVP" className="tabcontent">
|
||||
<MVP />
|
||||
</div>
|
||||
<Rankings />
|
||||
<footer>
|
||||
<p className="grey">
|
||||
something not working? message <a href="https://t.me/x0124816">me</a>.
|
||||
|
||||
199
src/Rankings.tsx
199
src/Rankings.tsx
@ -1,5 +1,5 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { ReactSortable, ReactSortableProps, Sortable } from "react-sortablejs";
|
||||
import { Dispatch, SetStateAction, useEffect, useState } from "react";
|
||||
import { ReactSortable, ReactSortableProps } from "react-sortablejs";
|
||||
import api, { baseUrl } from "./api";
|
||||
|
||||
interface Player {
|
||||
@ -24,26 +24,83 @@ function PlayerList(props: PlayerListProps) {
|
||||
);
|
||||
}
|
||||
|
||||
interface PlayerStateProps {
|
||||
user: Player[];
|
||||
setUser: Dispatch<SetStateAction<Player[]>>;
|
||||
players: Player[];
|
||||
setPlayers: Dispatch<SetStateAction<Player[]>>;
|
||||
}
|
||||
|
||||
export function SelectUser({
|
||||
user,
|
||||
setUser,
|
||||
players,
|
||||
setPlayers,
|
||||
}: PlayerStateProps) {
|
||||
return (
|
||||
<>
|
||||
<div className="box user">
|
||||
<span>your name?</span>
|
||||
{user.length < 1 ? (
|
||||
<>
|
||||
<br /> <span className="grey hint">drag your name here</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span
|
||||
className="renew"
|
||||
onClick={() => {
|
||||
setUser([]);
|
||||
}}
|
||||
>
|
||||
{" ✕"}
|
||||
</span>
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
<PlayerList
|
||||
list={user}
|
||||
setList={setUser}
|
||||
group={{
|
||||
name: "user-shared",
|
||||
put: function (to) {
|
||||
return to.el.children.length < 1;
|
||||
},
|
||||
}}
|
||||
className="dragbox"
|
||||
/>
|
||||
</div>
|
||||
{user.length < 1 && (
|
||||
<div className="box one">
|
||||
<h2>🥏🏃</h2>
|
||||
<ReactSortable
|
||||
list={players}
|
||||
setList={setPlayers}
|
||||
group={"user-shared"}
|
||||
className="dragbox reservoir"
|
||||
animation={200}
|
||||
>
|
||||
{players.map((item, _) => (
|
||||
<div className="extra-margin">
|
||||
<div key={item.id} className="item">
|
||||
{item.name}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</ReactSortable>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function Chemistry() {
|
||||
const [user, setUser] = useState<Player[]>([]);
|
||||
const [playersLeft, setPlayersLeft] = useState<Player[]>([]);
|
||||
const [playersMiddle, setPlayersMiddle] = useState<Player[]>([]);
|
||||
const [playersRight, setPlayersRight] = useState<Player[]>([]);
|
||||
|
||||
const [dialog, setDialog] = useState("dialog");
|
||||
|
||||
async function loadPlayers() {
|
||||
const response = await fetch(`${baseUrl}player/list`, {
|
||||
method: "GET",
|
||||
});
|
||||
const data = await response.json();
|
||||
setPlayersMiddle(data as Player[]);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
loadPlayers();
|
||||
}, []);
|
||||
|
||||
async function handleSubmit() {
|
||||
const dialog = document.querySelector("dialog[id='ChemistryDialog']");
|
||||
(dialog as HTMLDialogElement).showModal();
|
||||
@ -63,39 +120,6 @@ export function Chemistry() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="box user">
|
||||
<span>your name?</span>
|
||||
{user.length < 1 ? (
|
||||
<>
|
||||
<br /> <span className="grey hint">drag your name here</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span
|
||||
className="renew"
|
||||
onClick={() => {
|
||||
let newMiddle = user.concat(playersMiddle);
|
||||
setPlayersMiddle(newMiddle);
|
||||
setUser([]);
|
||||
}}
|
||||
>
|
||||
{" ✕"}
|
||||
</span>
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
<PlayerList
|
||||
list={user}
|
||||
setList={setUser}
|
||||
group={{
|
||||
name: "shared",
|
||||
put: function (to) {
|
||||
return to.el.children.length < 1;
|
||||
},
|
||||
}}
|
||||
className="dragbox"
|
||||
/>
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="box three">
|
||||
<h2>😬</h2>
|
||||
@ -273,3 +297,82 @@ export function MVP() {
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function openPage(pageName: string, color: string) {
|
||||
// Hide all elements with class="tabcontent" by default */
|
||||
var i, tabcontent, tablinks;
|
||||
tabcontent = document.getElementsByClassName("tabcontent");
|
||||
for (i = 0; i < tabcontent.length; i++) {
|
||||
(tabcontent[i] as HTMLElement).style.display = "none";
|
||||
}
|
||||
// Remove the background color of all tablinks/buttons
|
||||
tablinks = document.getElementsByClassName("tablink");
|
||||
for (i = 0; i < tablinks.length; i++) {
|
||||
let button = tablinks[i] as HTMLElement;
|
||||
button.style.backgroundColor = "unset";
|
||||
button.style.textDecoration = "unset";
|
||||
button.style.fontWeight = "unset";
|
||||
button.style.color = "unset";
|
||||
}
|
||||
// Show the specific tab content
|
||||
(document.getElementById(pageName) as HTMLElement).style.display = "block";
|
||||
// Add the specific color to the button used to open the tab content
|
||||
let activeButton = document.getElementById(
|
||||
pageName + "Button"
|
||||
) as HTMLElement;
|
||||
activeButton.style.textDecoration = "underline";
|
||||
activeButton.style.fontWeight = "bold";
|
||||
activeButton.style.backgroundColor = "#3366cc";
|
||||
activeButton.style.color = "white";
|
||||
document.body.style.backgroundColor = color;
|
||||
}
|
||||
|
||||
export default function Rankings() {
|
||||
const [user, setUser] = useState<Player[]>([]);
|
||||
const [players, setPlayers] = useState<Player[]>([]);
|
||||
|
||||
async function loadPlayers() {
|
||||
const response = await fetch(`${baseUrl}player/list`, {
|
||||
method: "GET",
|
||||
});
|
||||
const data = await response.json();
|
||||
setPlayers(data as Player[]);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
loadPlayers();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SelectUser {...{ user, setUser, players, setPlayers }} />
|
||||
{user.length === 1 && (
|
||||
<>
|
||||
<div className="container">
|
||||
<button
|
||||
className="tablink"
|
||||
id="ChemistryButton"
|
||||
onClick={() => openPage("Chemistry", "aliceblue")}
|
||||
>
|
||||
Chemistry
|
||||
</button>
|
||||
<button
|
||||
className="tablink"
|
||||
id="MVPButton"
|
||||
onClick={() => openPage("MVP", "aliceblue")}
|
||||
>
|
||||
MVP
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="Chemistry" className="tabcontent">
|
||||
<Chemistry />
|
||||
</div>
|
||||
<div id="MVP" className="tabcontent">
|
||||
<MVP />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user