froxxxy/bscscore
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: apply Astro, Preact, and general best practices to src

Browse Source 
- Refactored all components in src/components to:
  - Use arrow function components and prop destructuring
  - Add JSDoc for all exported components
  - Improve accessibility (aria-labels, roles, etc.)
  - Use correct key usage in lists
  - Add comments for non-obvious logic
  - Use modern event handler patterns and memoization where appropriate
- Refactored src/pages/index.astro:
  - Removed <html>, <head>, and <body> (should be in layout)
  - Used semantic <main> for main content
  - Kept only necessary imports and markup
- Refactored src/styles/index.css:
  - Removed duplicate rules
  - Ensured only global resets/utilities are present
  - Added comments for clarity
  - Ensured no component-specific styles are present
  - Used consistent formatting

Brings the codebase in line with modern Astro and Preact best practices, improves maintainability, accessibility, and code clarity.
This commit is contained in:
Frank Schwenk
2025-06-06 16:28:57 +02:00
parent 7cb79f5ee3
commit 209df5d9f2
10 changed files with 281 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/styles/index.css
View File

@@ -24,31 +24,7 @@ input, select {
font-size: 1.2rem;
}
/* Global resets and utility styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
body {
font-family: Arial, sans-serif;
background-color: #1a1a1a;
color: white;
min-height: 100vh;
overscroll-behavior: none;
}
input, select {
min-height: 44px;
padding: 12px;
font-size: 1.2rem;
}
/* Responsive adjustments for fullscreen toggle button */
@media screen and (max-width: 480px) {
.fullscreen-toggle {
bottom: 15px;
@@ -58,38 +34,41 @@ input, select {
}
}
/* Utility button for new game (global, not component-specific) */
.new-game-button {
width: 100%;
background: #222;
color: #fff;
border: none;
border-radius: 0;
font-size: 1.4rem;
font-weight: 600;
padding: 20px 0;
margin-bottom: 16px;
cursor: pointer;
transition: background 0.2s, color 0.2s;
text-align: center;
display: block;
width: 100%;
background: #222;
color: #fff;
border: none;
border-radius: 0;
font-size: 1.4rem;
font-weight: 600;
padding: 20px 0;
margin-bottom: 16px;
cursor: pointer;
transition: background 0.2s, color 0.2s;
text-align: center;
display: block;
}
.new-game-button:hover {
background: #333;
background: #333;
}
/* Modal overlay (global, not component-specific) */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.modal.show {
display: flex;
display: flex;
}