Simon/quizify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modified: app.py

Browse Source 
modified:   templates/playerselect.html
	modified:   templates/quiz_buzzer_multiplayer.html
	modified:   templates/team_setup.html
This commit is contained in:
Simon
2025-11-15 02:18:34 +01:00
parent a8b0efb0ff
commit b30cef5c85
4 changed files with 191 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app.py
View File

@@ -196,13 +196,8 @@ def quiz(playlist_id):
# Wähle das passende Template
if buzzer_mode == '1' and local_multiplayer == '1':
template_name = "quiz_buzzer_multiplayer.html"
# Initialisiere Spieler-Scores basierend auf gespeicherter Team-Anzahl
# Default: 6 Teams (Maximum), Frontend lädt nur die konfigurierten
player_scores = session.get(f'player_scores_{playlist_id}', [0, 0, 0, 0, 0, 0])
# Stelle sicher, dass wir immer 6 Scores haben
while len(player_scores) < 6:
player_scores.append(0)
session[f'player_scores_{playlist_id}'] = player_scores
# Lade Spieler-Scores
player_scores = session.get(f'player_scores_{playlist_id}', [0, 0, 0, 0])
elif buzzer_mode == '1':
template_name = "quiz_buzzer.html"
player_scores = None
@@ -248,7 +243,7 @@ def playerselect(playlist_id):
@app.route('/team_setup/<playlist_id>')
def team_setup(playlist_id):
"""Configure team names and count for multiplayer buzzer mode."""
"""Setup team names and count for multiplayer buzzer mode."""
game_mode = request.args.get('mode', 'title')
user = session.get('user')
return render_template('team_setup.html',

2
templates/playerselect.html
View File

@@ -69,7 +69,7 @@
<form method="get" action="{{ url_for('team_setup', playlist_id=playlist_id) }}">
<input type="hidden" name="mode" value="{{ game_mode }}">
<button class="player-btn" type="submit">{{ translations['local_multiplayer'] }}</button>
<div class="player-desc">Spiele mit 2-6 Teams an einem Gerät.</div>
<div class="player-desc">Spiele mit bis zu 4 Personen an einem Gerät.</div>
</form>
{% else %}
<form method="get" action="{{ url_for('quiz', playlist_id=playlist_id) }}">

179
templates/quiz_buzzer_multiplayer.html
View File

@@ -98,20 +98,10 @@
}
.buzzer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 15px;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin: 30px 0;
}
@media (min-width: 768px) {
.buzzer-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.buzzer-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.player-buzzer {
height: 150px;
border-radius: 20px;
@@ -142,11 +132,10 @@
opacity: 0.5;
}
.player-buzzer.start {
grid-column: 1 / -1;
background: linear-gradient(135deg, #1DB954 0%, #1ed760 100%);
border-color: rgba(29, 185, 84, 0.3);
box-shadow: 0 10px 40px rgba(29, 185, 84, 0.5);
width: 100%;
grid-column: 1 / -1;
}
.player-buzzer.start:hover {
box-shadow: 0 15px 50px rgba(29, 185, 84, 0.7);
@@ -255,25 +244,17 @@
let gameStarted = false;
let currentBuzzer = null;
// Initialisierung verschoben nach unten
let teamCount = 0;
let players = [];
let playerScoresData = {{ player_scores|tojson }} || [0, 0, 0, 0, 0, 0];
// Lade Team-Namen und Anzahl
const teamCount = parseInt(localStorage.getItem('team_count')) || 4;
const teamNames = JSON.parse(localStorage.getItem('team_names') || '["Spieler 1", "Spieler 2", "Spieler 3", "Spieler 4"]');
function initializePlayers() {
teamCount = parseInt(localStorage.getItem('team_count')) || 4;
players = [];
for (let i = 1; i <= teamCount; i++) {
const teamName = localStorage.getItem(`team_${i}_name`) || `Team ${i}`;
const scoreIndex = i - 1;
const score = playerScoresData[scoreIndex] || 0;
players.push({ id: i, name: teamName, score: score });
}
console.log('Loaded teams:', players);
console.log('Team count:', teamCount);
}
// Spieler-Daten
let players = [
{ id: 1, name: teamNames[0] || 'Spieler 1', score: {{ player_scores[0] if player_scores else 0 }} },
{ id: 2, name: teamNames[1] || 'Spieler 2', score: {{ player_scores[1] if player_scores else 0 }} },
{ id: 3, name: teamNames[2] || 'Spieler 3', score: {{ player_scores[2] if player_scores else 0 }} },
{ id: 4, name: teamNames[3] || 'Spieler 4', score: {{ player_scores[3] if player_scores else 0 }} }
];
window.onSpotifyWebPlaybackSDKReady = () => {
const token = '{{ access_token }}';
@@ -292,13 +273,9 @@
console.log('Ready with Device ID', device_id);
document.getElementById('device_id').value = device_id;
window.deviceId = device_id;
setCorrectAnswer();
// Aktualisiere Scoreboard falls schon initialisiert
if (players.length > 0) {
updateScoreboard();
}
initializePlayers();
updateScoreboard();
});
player.addListener('player_state_changed', state => {
@@ -320,6 +297,24 @@
window.spotifyPlayer = player;
};
function initializePlayers() {
// Update Spieler-Namen und verstecke inaktive Spieler
for (let i = 1; i <= 4; i++) {
const card = document.getElementById(`player${i}`);
const buzzer = document.getElementById(`buzzer${i}`);
if (i <= teamCount) {
card.querySelector('.player-name').textContent = players[i - 1].name;
card.style.display = 'block';
buzzer.style.display = 'flex';
buzzer.innerHTML = `🔴<br>${players[i - 1].name}`;
} else {
card.style.display = 'none';
buzzer.style.display = 'none';
}
}
}
function updateScoreboard() {
players.forEach((player, index) => {
const card = document.getElementById(`player${player.id}`);
@@ -349,10 +344,10 @@
.then(() => {
console.log('Play command sent');
document.getElementById('startButton').style.display = 'none';
// Aktiviere alle Buzzer
players.forEach(player => {
document.getElementById(`buzzer${player.id}`).classList.remove('disabled');
});
// Aktiviere Buzzer
for (let i = 1; i <= 4; i++) {
document.getElementById(`buzzer${i}`).classList.remove('disabled');
}
})
.catch(error => console.error('Error starting playback:', error));
}
@@ -418,9 +413,9 @@
document.getElementById('currentPlayer').textContent = `${players[playerId - 1].name} hat gebuzzert!`;
// Deaktiviere alle Buzzer
players.forEach(player => {
document.getElementById(`buzzer${player.id}`).classList.add('disabled');
});
for (let i = 1; i <= 4; i++) {
document.getElementById(`buzzer${i}`).classList.add('disabled');
}
document.getElementById('answerSection').classList.add('active');
window.earnedPoints = calculatePoints(elapsed);
@@ -556,77 +551,35 @@
}
window.onload = function() {
console.log('Page loaded, initializing...');
document.getElementById('startPosition').value = getOption('startPosition', 'start');
maxPoints = parseInt(localStorage.getItem('buzzer_max_points')) || 1000;
gracePeriod = parseInt(localStorage.getItem('buzzer_grace_period')) || 5;
decayRate = parseInt(localStorage.getItem('buzzer_decay_rate')) || 50;
document.getElementById('pointsDisplay').textContent = maxPoints + ' Punkte';
// Initialisiere Spieler
initializePlayers();
// Dynamisches Scoreboard erstellen
createScoreboard();
// Dynamische Buzzer-Buttons erstellen
createBuzzerButtons();
console.log('Initialization complete');
};
function createScoreboard() {
console.log('Creating scoreboard for', players.length, 'players');
const scoreboard = document.getElementById('scoreboard');
if (!scoreboard) {
console.error('Scoreboard element not found!');
return;
}
scoreboard.innerHTML = '';
players.forEach(player => {
const card = document.createElement('div');
card.className = 'player-card';
card.id = `player${player.id}`;
card.innerHTML = `
<div class="player-name">${player.name}</div>
<div class="player-score">${player.score}</div>
`;
scoreboard.appendChild(card);
});
console.log('Scoreboard created');
}
function createBuzzerButtons() {
console.log('Creating buzzer buttons for', players.length, 'players');
const grid = document.getElementById('buzzerGrid');
if (!grid) {
console.error('Buzzer grid element not found!');
return;
}
grid.innerHTML = `
<button class="player-buzzer start" id="startButton" onclick="startGame()">
▶️<br>START
</button>
`;
players.forEach(player => {
const button = document.createElement('button');
button.className = 'player-buzzer disabled';
button.id = `buzzer${player.id}`;
button.onclick = () => buzz(player.id);
button.innerHTML = `🔴<br>${player.name}`;
grid.appendChild(button);
});
console.log('Buzzer buttons created');
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="quiz-container">
<!-- Scoreboard -->
<div class="scoreboard" id="scoreboard">
<!-- Dynamisch generiert via JavaScript -->
<div class="scoreboard">
<div class="player-card" id="player1">
<div class="player-name">Spieler 1</div>
<div class="player-score">0</div>
</div>
<div class="player-card" id="player2">
<div class="player-name">Spieler 2</div>
<div class="player-score">0</div>
</div>
<div class="player-card" id="player3">
<div class="player-name">Spieler 3</div>
<div class="player-score">0</div>
</div>
<div class="player-card" id="player4">
<div class="player-name">Spieler 4</div>
<div class="player-score">0</div>
</div>
</div>
<input type="hidden" id="device_id" value="">
@@ -640,8 +593,22 @@
<div class="current-player" id="currentPlayer">Drücke START um zu beginnen</div>
<!-- Buzzer Buttons -->
<div class="buzzer-grid" id="buzzerGrid">
<!-- Dynamisch generiert via JavaScript -->
<div class="buzzer-grid">
<button class="player-buzzer start" id="startButton" onclick="startGame()">
▶️<br>START
</button>
<button class="player-buzzer disabled" id="buzzer1" onclick="buzz(1)">
🔴<br>Spieler 1
</button>
<button class="player-buzzer disabled" id="buzzer2" onclick="buzz(2)">
🔴<br>Spieler 2
</button>
<button class="player-buzzer disabled" id="buzzer3" onclick="buzz(3)">
🔴<br>Spieler 3
</button>
<button class="player-buzzer disabled" id="buzzer4" onclick="buzz(4)">
🔴<br>Spieler 4
</button>
</div>
<!-- Answer Section -->

206
templates/team_setup.html
View File

@@ -40,62 +40,53 @@
text-align: center;
}
.team-count-label {
font-size: 1.3em;
font-size: 1.2em;
margin-bottom: 15px;
color: #e0e0e0;
}
.team-count-buttons {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
.count-btn {
padding: 15px 30px;
border-radius: 15px;
border: 2px solid rgba(29, 185, 84, 0.3);
background: rgba(15, 20, 25, 0.8);
color: #e0e0e0;
font-size: 1.2em;
font-weight: 600;
}
.team-count-display {
font-size: 3em;
font-weight: bold;
color: #1DB954;
margin: 20px 0;
}
.team-count-slider {
width: 100%;
height: 8px;
border-radius: 5px;
background: rgba(29, 185, 84, 0.2);
outline: none;
-webkit-appearance: none;
}
.team-count-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #1DB954;
cursor: pointer;
box-shadow: 0 0 10px rgba(29, 185, 84, 0.5);
transition: all 0.3s ease;
}
.team-count-slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #1DB954;
cursor: pointer;
box-shadow: 0 0 10px rgba(29, 185, 84, 0.5);
border: none;
.count-btn:hover {
border-color: #1DB954;
transform: translateY(-2px);
}
.teams-list {
margin: 30px 0;
.count-btn.active {
background: linear-gradient(135deg, #1DB954 0%, #1ed760 100%);
border-color: #1DB954;
color: white;
box-shadow: 0 4px 15px rgba(29, 185, 84, 0.5);
}
.teams-section {
margin-bottom: 30px;
}
.team-input-group {
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 15px;
}
.team-number {
font-size: 1.5em;
font-weight: bold;
.team-label {
display: block;
font-size: 1.1em;
margin-bottom: 8px;
color: #1DB954;
min-width: 100px;
font-weight: 600;
}
.team-name-input {
flex: 1;
padding: 12px 20px;
.team-input {
width: 100%;
padding: 15px;
border-radius: 12px;
border: 2px solid rgba(29, 185, 84, 0.3);
background: rgba(15, 20, 25, 0.8);
@@ -103,11 +94,15 @@
font-size: 1.1em;
transition: all 0.3s ease;
}
.team-name-input:focus {
.team-input:focus {
outline: none;
border-color: #1DB954;
box-shadow: 0 0 10px rgba(29, 185, 84, 0.3);
}
.team-input.disabled {
opacity: 0.4;
cursor: not-allowed;
}
.btn {
display: inline-block;
padding: 15px 30px;
@@ -142,52 +137,59 @@
}
</style>
<script>
let teamCount = 4;
let teamCount = 2;
function updateTeamCount() {
teamCount = parseInt(document.getElementById('teamCountSlider').value);
document.getElementById('teamCountDisplay').textContent = teamCount;
updateTeamInputs();
}
function setTeamCount(count) {
teamCount = count;
function updateTeamInputs() {
const container = document.getElementById('teamInputs');
container.innerHTML = '';
// Update aktive Button
document.querySelectorAll('.count-btn').forEach(btn => {
btn.classList.remove('active');
});
document.getElementById(`count${count}`).classList.add('active');
for (let i = 1; i <= teamCount; i++) {
const savedName = localStorage.getItem(`team_${i}_name`) || `Team ${i}`;
const group = document.createElement('div');
group.className = 'team-input-group';
group.innerHTML = `
<div class="team-number">Team ${i}:</div>
<input type="text"
class="team-name-input"
id="team${i}Name"
value="${savedName}"
placeholder="Team ${i} Name"
maxlength="20">
`;
container.appendChild(group);
// Enable/Disable Inputs
for (let i = 1; i <= 4; i++) {
const input = document.getElementById(`team${i}`);
if (i <= count) {
input.disabled = false;
input.classList.remove('disabled');
} else {
input.disabled = true;
input.classList.add('disabled');
}
}
// Speichere in localStorage
localStorage.setItem('team_count', count);
}
function saveTeams() {
// Speichere Anzahl
localStorage.setItem('team_count', teamCount);
// Speichere Namen
const teams = [];
for (let i = 1; i <= teamCount; i++) {
const name = document.getElementById(`team${i}Name`).value || `Team ${i}`;
localStorage.setItem(`team_${i}_name`, name);
const name = document.getElementById(`team${i}`).value || `Spieler ${i}`;
teams.push(name);
}
// Speichere in localStorage
localStorage.setItem('team_names', JSON.stringify(teams));
localStorage.setItem('team_count', teamCount);
}
window.onload = function() {
// Lade gespeicherte Anzahl
const savedCount = localStorage.getItem('team_count') || '4';
document.getElementById('teamCountSlider').value = savedCount;
updateTeamCount();
// Lade gespeicherte Werte
const savedCount = parseInt(localStorage.getItem('team_count')) || 2;
const savedNames = JSON.parse(localStorage.getItem('team_names') || '[]');
// Setze Team-Anzahl
setTeamCount(savedCount);
// Setze Team-Namen
savedNames.forEach((name, index) => {
if (index < 4) {
document.getElementById(`team${index + 1}`).value = name;
}
});
};
</script>
</head>
@@ -196,29 +198,41 @@
<h2>👥 Team Setup</h2>
<div class="team-count-section">
<div class="team-count-label">Anzahl der Teams</div>
<div class="team-count-display" id="teamCountDisplay">4</div>
<input type="range"
class="team-count-slider"
id="teamCountSlider"
min="2"
max="6"
value="4"
oninput="updateTeamCount()">
<div class="team-count-label">Wie viele Teams spielen mit?</div>
<div class="team-count-buttons">
<button class="count-btn active" id="count2" onclick="setTeamCount(2)">2 Teams</button>
<button class="count-btn" id="count3" onclick="setTeamCount(3)">3 Teams</button>
<button class="count-btn" id="count4" onclick="setTeamCount(4)">4 Teams</button>
</div>
</div>
<div class="teams-list">
<div id="teamInputs"></div>
<div class="teams-section">
<div class="team-input-group">
<label class="team-label" for="team1">Team 1</label>
<input type="text" class="team-input" id="team1" placeholder="Team 1 Name" value="Spieler 1">
</div>
<div class="team-input-group">
<label class="team-label" for="team2">Team 2</label>
<input type="text" class="team-input" id="team2" placeholder="Team 2 Name" value="Spieler 2">
</div>
<div class="team-input-group">
<label class="team-label" for="team3">Team 3</label>
<input type="text" class="team-input disabled" id="team3" placeholder="Team 3 Name" value="Spieler 3" disabled>
</div>
<div class="team-input-group">
<label class="team-label" for="team4">Team 4</label>
<input type="text" class="team-input disabled" id="team4" placeholder="Team 4 Name" value="Spieler 4" disabled>
</div>
</div>
<div class="button-group">
<a href="{{ url_for('buzzer_settings', playlist_id=playlist_id) }}?mode={{ game_mode }}&local_multiplayer=1"
class="btn btn-primary"
onclick="saveTeams()">
✅ Weiter zu Einstellungen
<a href="{{ url_for('buzzer_settings', playlist_id=playlist_id, mode=game_mode, local_multiplayer=1) }}" class="btn btn-primary" onclick="saveTeams()">
✅ Weiter
</a>
<a href="{{ url_for('playerselect', playlist_id=playlist_id) }}?mode={{ game_mode }}&buzzer=1"
class="btn btn-secondary">
<a href="{{ url_for('playerselect', playlist_id=playlist_id, mode=game_mode, buzzer=1) }}" class="btn btn-secondary">
⬅️ Zurück
</a>
</div>