Compare commits
No commits in common. "e8c788832c322ecefd34c0fff94fc4accb479577" and "de751e15954fd3463c5d322cf0ce4b30ae6adc0d" have entirely different histories.
e8c788832c
...
de751e1595
2
main.py
2
main.py
@ -46,7 +46,7 @@ def add_players(players: list[Player]):
|
||||
|
||||
def list_players():
|
||||
with Session(engine) as session:
|
||||
statement = select(Player).order_by(Player.name)
|
||||
statement = select(Player)
|
||||
return session.exec(statement).fetchall()
|
||||
|
||||
|
||||
|
||||
128
src/App.css
128
src/App.css
@ -1,5 +1,5 @@
|
||||
* {
|
||||
border-radius: 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
body {
|
||||
@ -7,19 +7,15 @@ body {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
color: black;
|
||||
text-align: center;
|
||||
overflow-wrap: anywhere;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
footer {
|
||||
font-size: x-small;
|
||||
}
|
||||
|
||||
#root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.grey {
|
||||
@ -29,7 +25,6 @@ footer {
|
||||
.hint {
|
||||
position: absolute;
|
||||
font-size: 80%;
|
||||
padding: 8px;
|
||||
top: auto;
|
||||
left: 4px;
|
||||
bottom: auto;
|
||||
@ -38,17 +33,16 @@ footer {
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
h2 {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
width: min(96vw, 900px);
|
||||
justify-content: space-evenly;
|
||||
min-width: min(80vw, 800px);
|
||||
}
|
||||
|
||||
.dragbox {
|
||||
@ -58,19 +52,6 @@ h3 {
|
||||
height: 92%;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
&.one {
|
||||
max-width: min(96%, 768px);
|
||||
margin: 4px auto;
|
||||
}
|
||||
padding: 4px;
|
||||
margin: 4px 0.5%;
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
}
|
||||
|
||||
.reservoir {
|
||||
flex-direction: unset;
|
||||
flex-wrap: wrap;
|
||||
@ -78,9 +59,28 @@ h3 {
|
||||
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;
|
||||
}
|
||||
padding: 4px;
|
||||
margin: 4px auto;
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
}
|
||||
|
||||
.user {
|
||||
max-width: 240px;
|
||||
min-width: 100px;
|
||||
max-width: 400px;
|
||||
min-width: 200px;
|
||||
margin: 4px auto;
|
||||
.item {
|
||||
font-weight: bold;
|
||||
@ -92,38 +92,27 @@ h3 {
|
||||
cursor: pointer;
|
||||
font-size: small;
|
||||
border: 3px dashed black;
|
||||
border-radius: 1.2em;
|
||||
border-radius: 4px;
|
||||
margin: 8px auto;
|
||||
padding: 4px 16px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.extra-margin {
|
||||
padding: 0px 8px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
button {
|
||||
font-weight: bold;
|
||||
font-size: large;
|
||||
color: aliceblue;
|
||||
color: ghostwhite;
|
||||
background-color: black;
|
||||
border-radius: 1.2em;
|
||||
border: 4px solid black;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
&:focus {
|
||||
outline: black;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.submit_text {
|
||||
display: none;
|
||||
}
|
||||
.submit {
|
||||
position: fixed;
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
padding: 0px;
|
||||
background-color: unset;
|
||||
font-size: xx-large;
|
||||
margin-bottom: 20px;
|
||||
margin-right: 20px;
|
||||
&:hover {
|
||||
border-color: black;
|
||||
}
|
||||
}
|
||||
|
||||
@ -139,23 +128,15 @@ button {
|
||||
}
|
||||
|
||||
.tablink {
|
||||
color: white;
|
||||
background-color: unset;
|
||||
font-weight: unset;
|
||||
color: black;
|
||||
border: 2px solid black;
|
||||
border-radius: unset;
|
||||
outline: black;
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
margin: 4px auto;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
button {
|
||||
font-size: medium;
|
||||
margin: 4px 0.5%;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
opacity: 50%;
|
||||
&:hover {
|
||||
opacity: 75%;
|
||||
}
|
||||
}
|
||||
padding: 8px 16px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
/* Style the tab content (and add height:100% for full page content) */
|
||||
@ -173,29 +154,6 @@ button {
|
||||
font-size: 150%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
height: 160px;
|
||||
img {
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
h3 {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.loader {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
15
src/App.tsx
15
src/App.tsx
@ -5,24 +5,15 @@ import Rankings from "./Rankings";
|
||||
function App() {
|
||||
return (
|
||||
<>
|
||||
<div className="logo">
|
||||
<a href={baseUrl}>
|
||||
<img alt="logo" height="66%" src="logo.svg" />
|
||||
<img alt="logo" height="128px" src="logo.svg" />
|
||||
</a>
|
||||
<h3 className="centered">cutt</h3>
|
||||
<h1>cutt</h1>
|
||||
<span className="grey">cool ultimate team tool</span>
|
||||
</div>
|
||||
<Rankings />
|
||||
<footer>
|
||||
<p className="grey">
|
||||
something not working?
|
||||
<br />
|
||||
message <a href="https://t.me/x0124816">me</a>.
|
||||
<br />
|
||||
or fix it here:{" "}
|
||||
<a href="https://git.0124816.xyz/julius/cutt" key="gitea">
|
||||
<img src="gitea.svg" alt="gitea" height="16" />
|
||||
</a>
|
||||
something not working? message <a href="https://t.me/x0124816">me</a>.
|
||||
</p>
|
||||
</footer>
|
||||
</>
|
||||
|
||||
@ -40,9 +40,9 @@ export function SelectUser({
|
||||
return (
|
||||
<>
|
||||
<div className="box user">
|
||||
<span>your name?</span>
|
||||
{user.length < 1 ? (
|
||||
<>
|
||||
<span>your name?</span>
|
||||
<br /> <span className="grey hint">drag your name here</span>
|
||||
</>
|
||||
) : (
|
||||
@ -55,6 +55,7 @@ export function SelectUser({
|
||||
>
|
||||
{" ✕"}
|
||||
</span>
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
<PlayerList
|
||||
@ -174,9 +175,7 @@ export function Chemistry({ user, players }: PlayerInfoProps) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="submit" onClick={() => handleSubmit()}>
|
||||
💾 <span className="submit_text">submit</span>
|
||||
</button>
|
||||
<button onClick={() => handleSubmit()}>submit</button>
|
||||
<dialog
|
||||
id="ChemistryDialog"
|
||||
onClick={(event) => {
|
||||
@ -234,8 +233,8 @@ export function MVP({ user, players }: PlayerInfoProps) {
|
||||
<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
|
||||
carefully place the <i>Most Valuable Player</i> (according to your
|
||||
humble opinion) in this box
|
||||
</span>
|
||||
)}
|
||||
<PlayerList
|
||||
@ -253,9 +252,7 @@ export function MVP({ user, players }: PlayerInfoProps) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="submit" onClick={() => handleSubmit()}>
|
||||
💾 <span className="submit_text">submit</span>
|
||||
</button>
|
||||
<button onClick={() => handleSubmit()}>submit</button>
|
||||
<dialog
|
||||
id="MVPDialog"
|
||||
onClick={(event) => {
|
||||
@ -279,7 +276,10 @@ function openPage(pageName: string, color: string) {
|
||||
tablinks = document.getElementsByClassName("tablink");
|
||||
for (i = 0; i < tablinks.length; i++) {
|
||||
let button = tablinks[i] as HTMLElement;
|
||||
button.style.opacity = "50%";
|
||||
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";
|
||||
@ -287,8 +287,10 @@ function openPage(pageName: string, color: string) {
|
||||
let activeButton = document.getElementById(
|
||||
pageName + "Button"
|
||||
) as HTMLElement;
|
||||
activeButton.style.textDecoration = "underline";
|
||||
activeButton.style.fontWeight = "bold";
|
||||
activeButton.style.opacity = "100%";
|
||||
activeButton.style.backgroundColor = "#3366cc";
|
||||
activeButton.style.color = "white";
|
||||
document.body.style.backgroundColor = color;
|
||||
}
|
||||
|
||||
@ -313,20 +315,20 @@ export default function Rankings() {
|
||||
<SelectUser {...{ user, setUser, players, setPlayers }} />
|
||||
{user.length === 1 && (
|
||||
<>
|
||||
<div className="container navbar">
|
||||
<div className="container">
|
||||
<button
|
||||
className="tablink"
|
||||
id="ChemistryButton"
|
||||
onClick={() => openPage("Chemistry", "aliceblue")}
|
||||
>
|
||||
🧪 Chemistry
|
||||
Chemistry
|
||||
</button>
|
||||
<button
|
||||
className="tablink"
|
||||
id="MVPButton"
|
||||
onClick={() => openPage("MVP", "aliceblue")}
|
||||
>
|
||||
🏆 MVP
|
||||
MVP
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user