julius/cutt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: rename, word-wrap, some styling

Browse Source
This commit is contained in:
julius 2025-01-24 10:30:12 +01:00
parent 0cddbeb253
commit d82dee9319
Signed by: julius
GPG Key ID: C80A63E6A5FD7092
4 changed files with 113 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/logo.svg" /> <link rel="icon" type="image/svg+xml" href="/logo.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>yutt</title> <title>cutt</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

6
public/logo.svg
View File

@ -24,9 +24,9 @@
inkscape:deskcolor="#d1d1d1" inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm" inkscape:document-units="mm"
inkscape:zoom="14.329304" inkscape:zoom="14.329304"
inkscape:cx="17.132723" inkscape:cx="17.167617"
inkscape:cy="25.088448" inkscape:cy="25.088448"
inkscape:window-width="1263" inkscape:window-width="1408"
inkscape:window-height="1727" inkscape:window-height="1727"
inkscape:window-x="0" inkscape:window-x="0"
inkscape:window-y="0" inkscape:window-y="0"
@ -39,7 +39,7 @@
inkscape:groupmode="layer" inkscape:groupmode="layer"
id="layer1"> id="layer1">
<ellipse <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" id="path2"
cx="6.3500028" cx="6.3500028"
cy="6.3500109" cy="6.3500109"

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

33
src/App.css
View File

@ -1,22 +1,25 @@
body { body {
background-color: #ffcc00; background-color: ghostwhite;
color: black; color: black;
overflow-wrap: anywhere;
} }
#root { #root {
max-width: 1280px; max-width: 1280px;
margin: 0 auto; margin: 0 auto;
padding: 2rem; padding: 8px;
text-align: center; text-align: center;
} }
.read-the-docs { .grey {
color: #444; color: #444;
} }
h3 { h1,
h2 {
margin-top: 0px; margin-top: 0px;
margin-bottom: 0px; margin-bottom: 0px;
background-color: ghostwhite;
} }
.dragbox { .dragbox {
@ -24,15 +27,33 @@ h3 {
flex-direction: column; flex-direction: column;
flex-basis: 0; flex-basis: 0;
flex-grow: 1; flex-grow: 1;
position: relative; min-height: 32px;
height: 100%; height: 100%;
} }
.box { .box {
min-width: 30%; min-width: 30%;
padding: 4px; padding: 4px;
margin: 4px; margin: 4px auto;
border-style: solid; border-style: solid;
border-color: black; 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
View File

@ -1,7 +1,7 @@
import "./App.css"; import "./App.css";
import { Dispatch, FC, SetStateAction, useState } from "react"; import { Dispatch, FC, SetStateAction, useState } from "react";
import { ReactSortable } from "react-sortablejs"; import { ReactSortable, ReactSortableProps, Sortable } from "react-sortablejs";
interface Player { interface Player {
id: number; id: number;
@ -9,36 +9,29 @@ interface Player {
} }
function loadPlayers() { function loadPlayers() {
const players = ["August", "Beate", "Ceasar", "Doofus", "Elli"].map( const players = [
(v, i) => { "August",
return { id: i, name: v } as Player; "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; return players;
} }
function PlayerList(props: { function PlayerList(props: Partial<ReactSortableProps<any>>) {
players: Player[];
setPlayers: Dispatch<SetStateAction<Player[]>>;
}) {
return ( return (
<ReactSortable <ReactSortable {...props} animation={200} className="dragbox">
list={props.players} {props.list?.map((item) => (
setList={props.setPlayers} <div key={item.id} className="item">
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,
}}
>
{item.name} {item.name}
</div> </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() { function App() {
const players = loadPlayers(); const players = loadPlayers();
const [user, setUser] = useState<Player[]>([]);
const [playersLeft, setPlayersLeft] = useState<Player[]>([]); const [playersLeft, setPlayersLeft] = useState<Player[]>([]);
const [playersMiddle, setPlayersMiddle] = useState<Player[]>(players); const [playersMiddle, setPlayersMiddle] = useState<Player[]>(players);
const [playersRight, setPlayersRight] = useState<Player[]>([]); const [playersRight, setPlayersRight] = useState<Player[]>([]);
return ( return (
<> <>
<h1>yellow ultimate team tool</h1> <img alt="logo" height="128px" src="logo.svg" />
<div style={{ display: "flex", flexWrap: "wrap" }}> <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"> <div className="box">
<h3>hate</h3> <h2>😬</h2>
<PlayerList players={playersRight} setPlayers={setPlayersRight} /> <PlayerList
list={playersRight}
setList={setPlayersRight}
group={"shared"}
/>
</div> </div>
<div className="box"> <div className="box">
<h3>undecided</h3> <h2>🤷</h2>
<PlayerList players={playersMiddle} setPlayers={setPlayersMiddle} /> <PlayerList
list={playersMiddle}
setList={setPlayersMiddle}
group={"shared"}
/>
</div> </div>
<div className="box"> <div className="box">
<h3>love</h3> <h2>😍</h2>
<PlayerList players={playersLeft} setPlayers={setPlayersLeft} /> <PlayerList
list={playersLeft}
setList={setPlayersLeft}
group={"shared"}
/>
</div> </div>
</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>. something not working? message <a href="https://t.me/x0124816">me</a>.
</p> </p>
</> </>