modified: app.py
modified: templates/playerselect.html modified: templates/quiz_buzzer_multiplayer.html modified: templates/team_setup.html
This commit is contained in:
@@ -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;
|
||||
|
||||
function updateTeamCount() {
|
||||
teamCount = parseInt(document.getElementById('teamCountSlider').value);
|
||||
document.getElementById('teamCountDisplay').textContent = teamCount;
|
||||
updateTeamInputs();
|
||||
}
|
||||
|
||||
function updateTeamInputs() {
|
||||
const container = document.getElementById('teamInputs');
|
||||
container.innerHTML = '';
|
||||
let teamCount = 2;
|
||||
|
||||
function setTeamCount(count) {
|
||||
teamCount = count;
|
||||
|
||||
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);
|
||||
// Update aktive Button
|
||||
document.querySelectorAll('.count-btn').forEach(btn => {
|
||||
btn.classList.remove('active');
|
||||
});
|
||||
document.getElementById(`count${count}`).classList.add('active');
|
||||
|
||||
// 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>
|
||||
|
||||
Reference in New Issue
Block a user