feat: rename, word-wrap, some styling
This commit is contained in:
parent
0cddbeb253
commit
d82dee9319
GPG Key ID:
C80A63E6A5FD7092
@ -4,7 +4,7 @@
|
||||
<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>yutt</title>
|
||||
<title>cutt</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@ -24,9 +24,9 @@
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="14.329304"
|
||||
inkscape:cx="17.132723"
|
||||
inkscape:cx="17.167617"
|
||||
inkscape:cy="25.088448"
|
||||
inkscape:window-width="1263"
|
||||
inkscape:window-width="1408"
|
||||
inkscape:window-height="1727"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
@ -39,7 +39,7 @@
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<ellipse
|
||||
style="fill:#fffae5;stroke:#ffcc00;stroke-width:1.94357;fill-opacity:1"
|
||||
style="fill:#c7d6f1;stroke:#3366cc;stroke-width:1.94357;fill-opacity:1"
|
||||
id="path2"
|
||||
cx="6.3500028"
|
||||
cy="6.3500109"
|
||||
|
||||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
33
src/App.css
33
src/App.css
@ -1,22 +1,25 @@
|
||||
body {
|
||||
background-color: #ffcc00;
|
||||
background-color: ghostwhite;
|
||||
color: black;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
#root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
.grey {
|
||||
color: #444;
|
||||
}
|
||||
|
||||
h3 {
|
||||
h1,
|
||||
h2 {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
background-color: ghostwhite;
|
||||
}
|
||||
|
||||
.dragbox {
|
||||
@ -24,15 +27,33 @@ h3 {
|
||||
flex-direction: column;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
min-height: 32px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.box {
|
||||
min-width: 30%;
|
||||
padding: 4px;
|
||||
margin: 4px;
|
||||
margin: 4px auto;
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
}
|
||||
|
||||
.user {
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.item {
|
||||
font-size: small;
|
||||
border: 3px dashed black;
|
||||
border-radius: 4px;
|
||||
margin: 8px auto;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
button {
|
||||
font-weight: bold;
|
||||
color: ghostwhite;
|
||||
background-color: black;
|
||||
border: 4px solid black;
|
||||
}
|
||||
|
||||
118
src/App.tsx
118
src/App.tsx
@ -1,7 +1,7 @@
|
||||
import "./App.css";
|
||||
|
||||
import { Dispatch, FC, SetStateAction, useState } from "react";
|
||||
import { ReactSortable } from "react-sortablejs";
|
||||
import { ReactSortable, ReactSortableProps, Sortable } from "react-sortablejs";
|
||||
|
||||
interface Player {
|
||||
id: number;
|
||||
@ -9,36 +9,29 @@ interface Player {
|
||||
}
|
||||
|
||||
function loadPlayers() {
|
||||
const players = ["August", "Beate", "Ceasar", "Doofus", "Elli"].map(
|
||||
(v, i) => {
|
||||
return { id: i, name: v } as Player;
|
||||
}
|
||||
);
|
||||
const players = [
|
||||
"August",
|
||||
"Beate",
|
||||
"Ceasar",
|
||||
"Doofus",
|
||||
"Elli",
|
||||
"Ford P.",
|
||||
"Gabriel",
|
||||
"Hugo",
|
||||
"Ivar Johansson",
|
||||
"Jürgen Gordon Malinauskas",
|
||||
"Karsten Uwe Kalinowski",
|
||||
].map((v, i) => {
|
||||
return { id: i, name: v } as Player;
|
||||
});
|
||||
return players;
|
||||
}
|
||||
|
||||
function PlayerList(props: {
|
||||
players: Player[];
|
||||
setPlayers: Dispatch<SetStateAction<Player[]>>;
|
||||
}) {
|
||||
function PlayerList(props: Partial<ReactSortableProps<any>>) {
|
||||
return (
|
||||
<ReactSortable
|
||||
list={props.players}
|
||||
setList={props.setPlayers}
|
||||
group={"shared"}
|
||||
animation={300}
|
||||
className="dragbox"
|
||||
>
|
||||
{props.players.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
style={{
|
||||
border: "4px dashed black",
|
||||
borderRadius: 4,
|
||||
margin: "8px 4px",
|
||||
padding: 4,
|
||||
}}
|
||||
>
|
||||
<ReactSortable {...props} animation={200} className="dragbox">
|
||||
{props.list?.map((item) => (
|
||||
<div key={item.id} className="item">
|
||||
{item.name}
|
||||
</div>
|
||||
))}
|
||||
@ -46,29 +39,82 @@ function PlayerList(props: {
|
||||
);
|
||||
}
|
||||
|
||||
function handleSubmit(
|
||||
user: Player[],
|
||||
playersLeft: Player[],
|
||||
playersMiddle: Player[],
|
||||
playersRight: Player[]
|
||||
) {
|
||||
console.log(user);
|
||||
console.log(JSON.stringify(playersLeft));
|
||||
console.log(JSON.stringify(playersRight));
|
||||
}
|
||||
|
||||
function App() {
|
||||
const players = loadPlayers();
|
||||
const [user, setUser] = useState<Player[]>([]);
|
||||
const [playersLeft, setPlayersLeft] = useState<Player[]>([]);
|
||||
const [playersMiddle, setPlayersMiddle] = useState<Player[]>(players);
|
||||
const [playersRight, setPlayersRight] = useState<Player[]>([]);
|
||||
return (
|
||||
<>
|
||||
<h1>yellow ultimate team tool</h1>
|
||||
<div style={{ display: "flex", flexWrap: "wrap" }}>
|
||||
<img alt="logo" height="128px" src="logo.svg" />
|
||||
<h1>cutt</h1>
|
||||
<span className="grey">cool ultimate team tool</span>
|
||||
<div className="box user">
|
||||
<h2>who are you?</h2>
|
||||
<PlayerList
|
||||
list={user}
|
||||
setList={setUser}
|
||||
group={{
|
||||
name: "shared",
|
||||
put: function (to) {
|
||||
return to.el.children.length < 1;
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexWrap: "nowrap",
|
||||
justifyContent: "space-evenly",
|
||||
}}
|
||||
>
|
||||
<div className="box">
|
||||
<h3>hate</h3>
|
||||
<PlayerList players={playersRight} setPlayers={setPlayersRight} />
|
||||
<h2>😬</h2>
|
||||
<PlayerList
|
||||
list={playersRight}
|
||||
setList={setPlayersRight}
|
||||
group={"shared"}
|
||||
/>
|
||||
</div>
|
||||
<div className="box">
|
||||
<h3>undecided</h3>
|
||||
<PlayerList players={playersMiddle} setPlayers={setPlayersMiddle} />
|
||||
<h2>🤷</h2>
|
||||
<PlayerList
|
||||
list={playersMiddle}
|
||||
setList={setPlayersMiddle}
|
||||
group={"shared"}
|
||||
/>
|
||||
</div>
|
||||
<div className="box">
|
||||
<h3>love</h3>
|
||||
<PlayerList players={playersLeft} setPlayers={setPlayersLeft} />
|
||||
<h2>😍</h2>
|
||||
<PlayerList
|
||||
list={playersLeft}
|
||||
setList={setPlayersLeft}
|
||||
group={"shared"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p className="read-the-docs">
|
||||
|
||||
<button
|
||||
onClick={() =>
|
||||
handleSubmit(user, playersLeft, playersMiddle, playersRight)
|
||||
}
|
||||
>
|
||||
submit
|
||||
</button>
|
||||
<p className="grey">
|
||||
something not working? message <a href="https://t.me/x0124816">me</a>.
|
||||
</p>
|
||||
</>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user