@@ -976,7 +1026,7 @@
-
+
@@ -1018,7 +1068,7 @@
8-Ball | Race to 5
-
+
Spieler 1
0
@@ -1035,9 +1085,18 @@
+
+
Spieler 3
+
0
+
+
+
+
+
-
+
+
@@ -1166,19 +1225,14 @@
function updateNameHistory() {
// Collect all player names from games
- const allNames = games.flatMap(game => [game.player1, game.player2]);
+ const allNames = games.flatMap(game => [game.player1, game.player2, game.player3].filter(Boolean));
// Create a map of names to their latest usage
const nameLastUsed = {};
games.forEach(game => {
- nameLastUsed[game.player1] = Math.max(
- nameLastUsed[game.player1] || 0,
- new Date(game.updatedAt).getTime()
- );
- nameLastUsed[game.player2] = Math.max(
- nameLastUsed[game.player2] || 0,
- new Date(game.updatedAt).getTime()
- );
+ if (game.player1) nameLastUsed[game.player1] = Math.max(nameLastUsed[game.player1] || 0, new Date(game.updatedAt).getTime());
+ if (game.player2) nameLastUsed[game.player2] = Math.max(nameLastUsed[game.player2] || 0, new Date(game.updatedAt).getTime());
+ if (game.player3) nameLastUsed[game.player3] = Math.max(nameLastUsed[game.player3] || 0, new Date(game.updatedAt).getTime());
});
// Sort names by latest usage and remove duplicates
@@ -1192,17 +1246,21 @@
function updateNameSelects() {
const player1Select = document.getElementById('player1-select');
const player2Select = document.getElementById('player2-select');
+ const player3Select = document.getElementById('player3-select');
// Clear existing options except the first one
while (player1Select.options.length > 1) player1Select.remove(1);
while (player2Select.options.length > 1) player2Select.remove(1);
+ while (player3Select.options.length > 1) player3Select.remove(1);
// Add player names to dropdowns
playerNameHistory.forEach(name => {
const option1 = new Option(name, name);
const option2 = new Option(name, name);
+ const option3 = new Option(name, name);
player1Select.add(option1);
player2Select.add(option2);
+ player3Select.add(option3);
});
}
@@ -1226,10 +1284,10 @@
modal.classList.remove('show');
}
- // Update createNewGame to use the validation modal
function createNewGame() {
const player1Name = document.getElementById('player1').value.trim();
const player2Name = document.getElementById('player2').value.trim();
+ const player3Name = document.getElementById('player3').value.trim();
const gameType = document.getElementById('game-type').value;
const raceTo = document.getElementById('race-to').value;
@@ -1242,8 +1300,10 @@
id: Date.now(),
player1: player1Name,
player2: player2Name,
+ player3: player3Name || null,
score1: 0,
score2: 0,
+ score3: 0,
gameType: gameType,
raceTo: raceTo ? parseInt(raceTo) : null,
status: 'active',
@@ -1264,14 +1324,16 @@
if (player === 1) {
game.score1 = Math.max(0, game.score1 + change);
- } else {
+ } else if (player === 2) {
game.score2 = Math.max(0, game.score2 + change);
+ } else if (player === 3) {
+ game.score3 = Math.max(0, game.score3 + change);
}
game.updatedAt = new Date().toISOString();
// Check for game completion
- if (game.raceTo && (game.score1 >= game.raceTo || game.score2 >= game.raceTo)) {
+ if (game.raceTo && (game.score1 >= game.raceTo || game.score2 >= game.raceTo || game.score3 >= game.raceTo)) {
game.status = 'completed';
}
@@ -1282,6 +1344,7 @@
if (document.getElementById('game-detail-screen').classList.contains('active')) {
document.getElementById('score1').textContent = game.score1;
document.getElementById('score2').textContent = game.score2;
+ document.getElementById('score3').textContent = game.score3;
// Update control button if game is completed
if (game.status === 'completed') {
@@ -1365,16 +1428,26 @@
return;
}
- gamesContainer.innerHTML = filteredGames.map(game => `
-
-
-
${game.gameType}${game.raceTo ? ` | ${game.raceTo}` : ''}
-
${game.player1} vs ${game.player2}
-
${game.score1} - ${game.score2}
+ gamesContainer.innerHTML = filteredGames.map(game => {
+ const playerNames = game.player3
+ ? `${game.player1} vs ${game.player2} vs ${game.player3}`
+ : `${game.player1} vs ${game.player2}`;
+
+ const scores = game.player3
+ ? `${game.score1} - ${game.score2} - ${game.score3}`
+ : `${game.score1} - ${game.score2}`;
+
+ return `
+
+
+
${game.gameType}${game.raceTo ? ` | ${game.raceTo}` : ''}
+
${playerNames}
+
${scores}
+
+
-
-
- `).join('');
+ `;
+ }).join('');
}
function showGameDetail(gameId) {
@@ -1391,16 +1464,28 @@
document.getElementById('player1-name').textContent = game.player1;
document.getElementById('player2-name').textContent = game.player2;
+ // Handle player 3
+ const player3Score = document.getElementById('player3-score');
+ if (game.player3) {
+ document.getElementById('player3-name').textContent = game.player3;
+ document.getElementById('score3').textContent = game.score3;
+ player3Score.style.display = 'flex';
+ } else {
+ player3Score.style.display = 'none';
+ }
+
// Update scores
document.getElementById('score1').textContent = game.score1;
document.getElementById('score2').textContent = game.score2;
// Add or remove franky class based on player names
const player1Container = document.querySelector('.player-score:first-child');
- const player2Container = document.querySelector('.player-score:last-child');
+ const player2Container = document.querySelector('.player-score:nth-child(2)');
+ const player3Container = document.getElementById('player3-score');
player1Container.classList.toggle('franky', game.player1 === 'Fränky');
player2Container.classList.toggle('franky', game.player2 === 'Fränky');
+ player3Container.classList.toggle('franky', game.player3 === 'Fränky');
// Update control button
const controlButton = document.getElementById('game-control');
@@ -1410,7 +1495,7 @@
controlButton.classList.add('disabled');
} else {
controlButton.textContent = 'Spiel beenden';
- controlButton.onclick = () => handleGameOver(gameId);
+ controlButton.onclick = () => finishGame();
controlButton.classList.remove('disabled');
}