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

refactor: modularize screens, styles, and logic

Browse Source 
- Split monolithic index.astro into Astro components for each screen and modal
- Moved all styles to src/styles/index.css
- Moved all JS logic to src/scripts/index.js and public/scripts/index.js
- Updated event wiring and removed inline handlers for best practice
- Ensured all components and scripts are integrated and functional

Refs #1
This commit is contained in:
Frank Schwenk
2025-06-05 19:51:01 +02:00
parent 38916b026d
commit de07d6e7a2
11 changed files with 1920 additions and 1715 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/GameCompletionModal.astro Normal file
View File

@@ -0,0 +1,16 @@
---
---
<div id="game-completion-modal" class="modal">
<div class="modal-content">
<h2>Spiel beenden</h2>
<div id="game-summary">
<div class="final-scores"></div>
<div class="winner-announcement"></div>
</div>
<div class="modal-buttons">
<button class="btn btn--warning">Bestätigen</button>
<button class="btn">Abbrechen</button>
</div>
</div>
</div>
<!-- TODO: Wire up events and props for integration -->

41
src/components/GameDetail.astro Normal file
View File

@@ -0,0 +1,41 @@
---
---
<div class="screen" id="game-detail-screen">
<div class="screen-content">
<div class="game-title" id="game-title">8-Ball | Race to 5</div>
<div class="game-header">
<button class="btn nav-button">Zurück zur Liste</button>
</div>
<div class="scores-container">
<div class="player-score">
<div class="player-name" id="player1-name">Spieler 1</div>
<div class="score" id="score1">0</div>
<div class="score-buttons">
<button class="score-button">-</button>
<button class="score-button">+</button>
</div>
</div>
<div class="player-score">
<div class="player-name" id="player2-name">Spieler 2</div>
<div class="score" id="score2">0</div>
<div class="score-buttons">
<button class="score-button">-</button>
<button class="score-button">+</button>
</div>
</div>
<div class="player-score" id="player3-score" style="display: none;">
<div class="player-name" id="player3-name">Spieler 3</div>
<div class="score" id="score3">0</div>
<div class="score-buttons">
<button class="score-button">-</button>
<button class="score-button">+</button>
</div>
</div>
</div>
<div class="game-controls">
<button id="game-control" class="control-button">Spiel beenden</button>
<button id="delete-game" class="control-button delete">Spiel löschen</button>
</div>
</div>
</div>
<!-- TODO: Wire up events and props for integration -->

11
src/components/GameHistory.astro Normal file
View File

@@ -0,0 +1,11 @@
---
---
<div class="screen" id="game-history-screen">
<div class="screen-content">
<h1 class="screen-title">Spielhistorie</h1>
<div class="nav-buttons">
<button class="btn nav-button">Zurück zur Liste</button>
</div>
</div>
</div>
<!-- TODO: Wire up events and props for integration -->

21
src/components/GameList.astro Normal file
View File

@@ -0,0 +1,21 @@
---
---
<div class="screen active" id="game-list-screen">
<div class="screen-content">
<h1 class="screen-title">Spiele</h1>
<div class="game-list">
<div class="nav-buttons">
<button class="btn nav-button">Neues Spiel</button>
</div>
<div class="game-filters">
<button class="btn filter-button active">Alle</button>
<button class="btn filter-button">Aktiv</button>
<button class="btn filter-button">Abgeschlossen</button>
</div>
<div id="games-container">
<!-- Games will be added dynamically -->
</div>
</div>
</div>
</div>
<!-- TODO: Wire up events and props for integration -->

18
src/components/Modal.astro Normal file
View File

@@ -0,0 +1,18 @@
---
---
<div id="modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close-button">&times;</span>
<h2 id="modal-title">Spiel löschen</h2>
</div>
<div class="modal-body">
<p id="modal-message">Möchten Sie das Spiel zwischen Spieler 1 und Spieler 2 wirklich löschen?</p>
</div>
<div class="modal-footer">
<button class="modal-button cancel">Abbrechen</button>
<button class="modal-button confirm">Löschen</button>
</div>
</div>
</div>
<!-- TODO: Wire up events and props for integration -->

50
src/components/NewGame.astro Normal file
View File

@@ -0,0 +1,50 @@
---
---
<div class="screen" id="new-game-screen">
<div class="screen-content">
<h1 class="screen-title">Neues Spiel</h1>
<div class="player-inputs">
<div class="player-input">
<label for="player1">Spieler 1</label>
<div class="name-input-container">
<select id="player1-select" class="name-select"><option value="">Vorherige Spieler...</option></select>
<input type="text" id="player1" placeholder="Name Spieler 1" class="name-input" />
</div>
</div>
<div class="player-input">
<label for="player2">Spieler 2</label>
<div class="name-input-container">
<select id="player2-select" class="name-select"><option value="">Vorherige Spieler...</option></select>
<input type="text" id="player2" placeholder="Name Spieler 2" class="name-input" />
</div>
</div>
<div class="player-input">
<label for="player3">Spieler 3 (optional)</label>
<div class="name-input-container">
<select id="player3-select" class="name-select"><option value="">Vorherige Spieler...</option></select>
<input type="text" id="player3" placeholder="Name Spieler 3" class="name-input" />
</div>
</div>
</div>
<div class="game-settings">
<div class="setting-group">
<label for="game-type">Spieltyp</label>
<select id="game-type">
<option value="8-Ball">8-Ball</option>
<option value="9-Ball">9-Ball</option>
<option value="10-Ball">10-Ball</option>
<option value="14/1">14/1 endlos</option>
</select>
</div>
<div class="setting-group">
<label for="race-to">Race to X (optional)</label>
<input type="number" id="race-to" placeholder="0" min="0" max="99" />
</div>
</div>
<div class="nav-buttons">
<button class="btn nav-button">Spiel starten</button>
<button class="btn nav-button">Abbrechen</button>
</div>
</div>
</div>
<!-- TODO: Wire up events and props for integration -->

17
src/components/ValidationModal.astro Normal file
View File

@@ -0,0 +1,17 @@
---
---
<div id="validation-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close-button">&times;</span>
<h2 id="validation-modal-title">Fehler</h2>
</div>
<div class="modal-body">
<p id="validation-modal-message"></p>
</div>
<div class="modal-footer">
<button class="modal-button cancel">OK</button>
</div>
</div>
</div>
<!-- TODO: Wire up events and props for integration -->