tototomate123/cau-praktikum
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

websocket #5

Merged
tototomate123 merged 4 commits from websocket into main 2026-02-25 19:49:43 +00:00
Conversation 0 Commits 4 Files Changed 12
+340 -17
6 changed files with 340 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7ee2e1ad08 - Show all commits
app/static/app.css
+219
View File
@@ -0,0 +1,219 @@
:root {
--bg: #f4f6f8;
--surface: #ffffff;
--surface-soft: #f8fafc;
--border: #dde2e8;
--text: #111827;
--muted: #5f6b7a;
--primary: #1f2937;
--primary-strong: #0f172a;
--success: #16a34a;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Manrope", "Segoe UI", sans-serif;
background: var(--bg);
color: var(--text);
}
.site-shell {
min-height: 100vh;
}
.topbar {
height: 64px;
border-bottom: 1px solid var(--border);
background: var(--surface);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
position: sticky;
top: 0;
}
.brand {
color: var(--text);
text-decoration: none;
font-weight: 700;
font-size: 1.1rem;
}
.topnav {
display: flex;
gap: 8px;
}
.topnav a {
text-decoration: none;
color: var(--muted);
padding: 8px 12px;
border: 1px solid transparent;
border-radius: 4px;
font-weight: 600;
}
.topnav a:hover {
color: var(--text);
background: var(--surface-soft);
border-color: var(--border);
}
.topnav a.active {
color: var(--text);
background: var(--surface-soft);
border-color: var(--border);
}
.profile-pill {
border: 1px solid var(--border);
background: var(--surface-soft);
padding: 7px 10px;
font-size: 0.9rem;
color: var(--muted);
}
.page-wrap {
max-width: 1080px;
margin: 0 auto;
padding: 24px 20px 30px;
}
h1 {
margin: 8px 0 10px;
font-size: clamp(1.6rem, 3vw, 2.25rem);
line-height: 1.15;
}
.cta-row {
margin-top: 18px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.btn {
font: inherit;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
padding: 9px 14px;
border-radius: 4px;
text-decoration: none;
cursor: pointer;
}
.btn-primary {
background: var(--primary);
border-color: var(--primary);
color: #ffffff;
}
.btn-primary:hover {
background: var(--primary-strong);
border-color: var(--primary-strong);
}
.btn-secondary:hover {
background: var(--surface-soft);
}
.queue-layout {
margin-top: 14px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.chip-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.chip {
border: 1px solid var(--border);
background: var(--surface-soft);
color: var(--text);
border-radius: 4px;
padding: 7px 11px;
font: inherit;
cursor: pointer;
}
.chip.active,
.chip:hover {
border-color: #b7c0cb;
background: #eef2f6;
}
.friend-list {
margin: 0;
padding: 0;
list-style: none;
}
.friend-list li {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 0;
border-top: 1px solid var(--border);
color: var(--muted);
}
.friend-list li:first-child {
border-top: 0;
}
.dot {
width: 8px;
height: 8px;
border-radius: 4px;
background: var(--success);
}
@media (max-width: 900px) {
.panel-grid {
grid-template-columns: 1fr;
}
.queue-layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
.topbar {
height: auto;
flex-wrap: wrap;
gap: 8px;
padding: 10px 14px;
}
.topnav {
width: 100%;
order: 3;
}
.topnav a {
flex: 1;
text-align: center;
}
.page-wrap {
padding: 16px 14px 24px;
}
.hero,
.stack-head,
.panel {
padding: 14px;
}
}
app/static/play.css
View File
app/templates/friends.html
+48
View File
@@ -0,0 +1,48 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Friends</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}" />
</head>
<body>
<div class="site-shell">
<header class="topbar">
<a href="{{ url_for('main.home') }}" class="brand">Chess</a>
<nav class="topnav">
<a href="{{ url_for('main.home') }}">Home</a>
<a href="{{ url_for('main.play') }}">Play</a>
<a href="{{ url_for('main.friends') }}" class="active">Friends</a>
</nav>
<div class="profile-pill">{{ current_user.username }}</div>
</header>
<h1>Friends</h1>
<section class="panel-grid">
<article class="panel">
<h2>Online now</h2>
<ul class="friend-list">
<li><span class="dot"></span>name1</li>
<li><span class="dot"></span>friend2</li>
<li><span class="dot"></span>bro has a lot of friends</li>
</ul>
</article>
<article class="panel">
<h2>Incoming invites</h2>
<p>No pending invitations
</p>
</article>
</section>
</main>
</div>
</body>
</html>
app/templates/home.html
+28 -5
View File
@@ -3,15 +3,38 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home Page</title> <title>Home</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link <link
href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap"
rel="stylesheet" rel="stylesheet"
href="{{ url_for('static', filename='style.css') }}"
/> />
<link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}" />
</head> </head>
<body> <body>
<h1>logged in</h1> <div class="site-shell">
<p>hi, {{ current_user.username }}!</p> <header class="topbar">
<a href="{{ url_for('main.play') }}" class="link-button">Play Chess</a> <a href="{{ url_for('main.home') }}" class="brand">Chess</a>
<nav class="topnav">
<a href="{{ url_for('main.home') }}" class="active">Home</a>
<a href="{{ url_for('main.play') }}">Play</a>
<a href="{{ url_for('main.friends') }}">Friends</a>
</nav>
<div class="profile-pill">{{ current_user.username }}</div>
</header>
<main class="page-wrap">
<h1>Welcome back, {{current_user.username}}</h1>
<div class="cta-row">
<a href="{{ url_for('main.play') }}" class="btn btn-primary"
>Start a game</a
>
<a href="{{ url_for('main.friends') }}" class="btn btn-secondary"
>Open friends</a
>
</div>
</main>
</div>
</body> </body>
</html> </html>
app/templates/play.html
+44 -11
View File
@@ -3,21 +3,54 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chess Arena</title> <title>Play</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link <link
href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap"
rel="stylesheet" rel="stylesheet"
href="{{ url_for('static', filename='play.css') }}"
/> />
<script <link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}" />
src="https://cdn.socket.io/4.8.1/socket.io.min.js"
crossorigin="anonymous"
></script>
<script
type="module"
src="{{ url_for('static', filename='js/main.js') }}"
></script>
</head> </head>
<body> <body>
<div id="app"></div> <div class="site-shell">
<header class="topbar">
<a href="{{ url_for('main.home') }}" class="brand">Chess</a>
<nav class="topnav">
<a href="{{ url_for('main.home') }}">Home</a>
<a href="{{ url_for('main.play') }}" class="active">Play</a>
<a href="{{ url_for('main.friends') }}">Friends</a>
</nav>
<div class="profile-pill">{{ current_user.username }}</div>
</header>
<!-- todo: make all of this via js and implement logic -->
<main class="page-wrap">
<section class="queue-layout">
<article class="panel">
<h2>Game settings</h2>
<h4>Choose a time setup</h4>
<div class="chip-row">
<button class="chip">1 + 0</button>
<button class="chip">3 + 2</button>
<button class="chip active">10 + 0</button>
<button class="chip">15 + 10</button>
</div>
<h4>You play as</h4>
<div class="chip-row">
<button class="chip">white</button>
<button class="chip">black</button>
<button class="chip active">random</button>
</div>
<div class="cta-row">
<!-- <button class="btn btn-primary" type="button">Start game</button> -->
<button class="btn btn-secondary" type="button">
Create game code
</button>
</div>
</article>
</section>
</main>
</div>
</body> </body>
</html> </html>
run.py
+1 -1
View File
@@ -4,4 +4,4 @@ app = create_app()
if __name__ == "__main__": if __name__ == "__main__":
print("Starting server...") print("Starting server...")
sIO.run(app, debug=True, use_reloader=False) sIO.run(app, debug=True, use_reloader=True)