feat: Add statistics tracking and fix clipboard API

- Add personal statistics with badges for each attempt count
- Track solved puzzles per attempt (1-6) and failed attempts
- Display statistics after game completion
- Fix clipboard API issue with fallback method
- Add footer with attribution
This commit is contained in:
Hördle Bot
2025-11-21 13:20:45 +01:00
parent ed87bd8c97
commit ea26649558
5 changed files with 252 additions and 22 deletions

View File

@@ -6,12 +6,9 @@
body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(
to bottom,
background: linear-gradient(to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
margin: 0;
@@ -63,7 +60,7 @@ body {
background: #f3f4f6;
padding: 1rem;
border-radius: 0.5rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.player-controls {
@@ -128,7 +125,8 @@ body {
}
.guess-text {
color: #ef4444; /* Red for wrong */
color: #ef4444;
/* Red for wrong */
}
.guess-text.skipped {
@@ -272,3 +270,84 @@ body {
.btn-primary:hover {
background: #333;
}
/* Footer */
.app-footer {
margin-top: auto;
padding: 2rem 1rem 1rem;
text-align: center;
font-size: 0.875rem;
color: #666;
border-top: 1px solid #e5e7eb;
width: 100%;
}
.app-footer p {
margin: 0;
}
.app-footer a {
color: #000;
text-decoration: none;
font-weight: 500;
}
.app-footer a:hover {
text-decoration: underline;
}
/* Statistics */
.statistics-container {
margin: 1.5rem 0;
padding: 1rem;
background: rgba(255, 255, 255, 0.5);
border-radius: 0.5rem;
}
.statistics-title {
font-size: 1.125rem;
font-weight: bold;
margin: 0 0 0.5rem 0;
text-align: center;
}
.statistics-total {
font-size: 0.875rem;
text-align: center;
margin: 0 0 1rem 0;
color: #666;
}
.statistics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 0.75rem;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.75rem 0.5rem;
background: rgba(255, 255, 255, 0.8);
border-radius: 0.375rem;
border: 1px solid #e5e7eb;
}
.stat-badge {
font-size: 1.5rem;
margin-bottom: 0.25rem;
}
.stat-label {
font-size: 0.75rem;
color: #666;
margin-bottom: 0.25rem;
text-align: center;
}
.stat-count {
font-size: 1.25rem;
font-weight: bold;
color: #000;
}

View File

@@ -26,6 +26,15 @@ export default function RootLayout({
<html lang="en">
<body className={`${geistSans.variable} ${geistMono.variable}`}>
{children}
<footer className="app-footer">
<p>
Vibe coded with and 🍺 by{' '}
<a href="https://digitalcourage.social/@elpatron" target="_blank" rel="noopener noreferrer">
@elpatron@digitalcourage.social
</a>
{' '}- for personal use among friends only!
</p>
</footer>
</body>
</html>
);