Calculator include to tournament and UI cleanup

This commit is contained in:
2026-06-07 11:56:52 +02:00
parent 1ad9534819
commit 9a54e22bd0
3 changed files with 70 additions and 22 deletions
+28 -19
View File
@@ -2,7 +2,7 @@
<html lang="sl"> <html lang="sl">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Kalkulator</title> <title>Nabijanje</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/css/base.css"> <link rel="stylesheet" href="/static/css/base.css">
<link rel="stylesheet" href="/static/css/navbar.css"> <link rel="stylesheet" href="/static/css/navbar.css">
@@ -71,7 +71,7 @@
font-size: 0.95rem; font-weight: 700; cursor: pointer; font-size: 0.95rem; font-weight: 700; cursor: pointer;
transition: background 0.2s, transform 0.1s; width: 100%; transition: background 0.2s, transform 0.1s; width: 100%;
} }
.gen-btn:hover:not(:disabled) { background: #1e7e34; transform: translateY(-1px); } .gen-btn:hover:not(:disabled) { background: #1e7e34; }
.gen-btn:disabled { background: #ced4da; cursor: not-allowed; } .gen-btn:disabled { background: #ced4da; cursor: not-allowed; }
.left-utils { padding: 0 20px 18px; display: none; flex-direction: column; gap: 7px; flex-shrink: 0; } .left-utils { padding: 0 20px 18px; display: none; flex-direction: column; gap: 7px; flex-shrink: 0; }
@@ -80,12 +80,12 @@
padding: 9px 12px; border-radius: 8px; font-size: 0.82rem; padding: 9px 12px; border-radius: 8px; font-size: 0.82rem;
font-weight: 600; cursor: pointer; transition: all 0.15s; width: 100%; text-align: center; font-weight: 600; cursor: pointer; transition: all 0.15s; width: 100%; text-align: center;
} }
.btn-zeros { background: white; border: 2px solid #6c757d; color: #6c757d; } .btn-zeros { background: #6c757d; border: 2px solid #6c757d; color: white; }
.btn-zeros:hover { background: #6c757d; color: white; } .btn-zeros:hover { background: #545b62; border-color: #545b62; }
.btn-reset { background: white; border: 2px solid #dc3545; color: #dc3545; } .btn-reset { background: #dc3545; border: 2px solid #dc3545; color: white; }
.btn-reset:hover { background: #dc3545; color: white; } .btn-reset:hover { background: #b02a37; border-color: #b02a37; }
.btn-print { background: white; border: 2px solid #6f42c1; color: #6f42c1; } .btn-print { background: #6f42c1; border: 2px solid #6f42c1; color: white; }
.btn-print:hover { background: #6f42c1; color: white; } .btn-print:hover { background: #59359a; border-color: #59359a; }
@media print { @media print {
/* hide everything except the print layout */ /* hide everything except the print layout */
@@ -401,7 +401,9 @@
flex: 1; min-width: 0; flex: 1; min-width: 0;
font-size: 0.88rem; font-weight: 600; color: #2c3e50; font-size: 0.88rem; font-weight: 600; color: #2c3e50;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
cursor: pointer;
} }
.score-name:hover { color: #f97316; }
.score-tens { font-size: 0.7rem; font-weight: 700; color: #ffc107; flex-shrink: 0; white-space: nowrap; } .score-tens { font-size: 0.7rem; font-weight: 700; color: #ffc107; flex-shrink: 0; white-space: nowrap; }
.score-pts { font-size: 1.05rem; font-weight: 800; color: #28a745; flex-shrink: 0; } .score-pts { font-size: 1.05rem; font-weight: 800; color: #28a745; flex-shrink: 0; }
.score-del { .score-del {
@@ -416,24 +418,24 @@
.score-print-footer { padding: 8px 10px 10px; flex-shrink: 0; } .score-print-footer { padding: 8px 10px 10px; flex-shrink: 0; }
.btn-print { .btn-print {
width: 100%; padding: 9px; border-radius: 8px; width: 100%; padding: 9px; border-radius: 8px;
border: 2px solid #6f42c1; background: white; border: 2px solid #6f42c1; background: #6f42c1;
color: #6f42c1; font-size: 0.82rem; font-weight: 600; color: white; font-size: 0.82rem; font-weight: 600;
cursor: pointer; transition: all 0.15s; cursor: pointer; transition: all 0.15s;
} }
.btn-print:hover { background: #6f42c1; color: white; } .btn-print:hover { background: #59359a; border-color: #59359a; }
.btn-clear-board { .btn-clear-board {
width: 100%; padding: 9px; border-radius: 8px; width: 100%; padding: 9px; border-radius: 8px;
border: 2px solid #dc3545; background: white; border: 2px solid #dc3545; background: #dc3545;
color: #dc3545; font-size: 0.82rem; font-weight: 600; color: white; font-size: 0.82rem; font-weight: 600;
cursor: pointer; transition: all 0.15s; cursor: pointer; transition: all 0.15s;
} }
.btn-clear-board:hover { background: #dc3545; color: white; } .btn-clear-board:hover { background: #b02a37; border-color: #b02a37; }
</style> </style>
<script src="/static/js/i18n.js"></script> <script src="/static/js/i18n.js"></script>
</head> </head>
<body> <body>
<div class="navbar"> <div class="navbar">
<div class="navbar-title">🎯 Kalkulator</div> <div class="navbar-title">💥 Nabijanje</div>
<div class="navbar-controls"> <div class="navbar-controls">
<a href="/" class="nav-btn">✕</a> <a href="/" class="nav-btn">✕</a>
</div> </div>
@@ -551,7 +553,7 @@
<img src="/static/logo.png" class="pl-logo" alt="Logo" onerror="this.style.display='none'"> <img src="/static/logo.png" class="pl-logo" alt="Logo" onerror="this.style.display='none'">
<div class="pl-titles"> <div class="pl-titles">
<div class="pl-title">🏆 Lestvica</div> <div class="pl-title">🏆 Lestvica</div>
<div class="pl-subtitle">Rezultati kalkulatorja</div> <div class="pl-subtitle">Rezultati nabijanja</div>
</div> </div>
<div class="pl-meta" id="plMeta"></div> <div class="pl-meta" id="plMeta"></div>
</div> </div>
@@ -778,13 +780,13 @@
footer.style.display = ''; footer.style.display = '';
list.innerHTML = scoreboard.map((entry, idx) => { list.innerHTML = scoreboard.map((entry, idx) => {
const rank = idx + 1; const rank = computeRank(idx);
const rankClass = rank <= 3 ? `rank-${rank}` : ''; const rankClass = rank <= 3 ? `rank-${rank}` : '';
const medal = rank === 1 ? '🥇' : rank === 2 ? '🥈' : rank === 3 ? '🥉' : rank; const medal = rank === 1 ? '🥇' : rank === 2 ? '🥈' : rank === 3 ? '🥉' : rank;
return ` return `
<div class="score-row ${rankClass}"> <div class="score-row ${rankClass}">
<div class="rank-badge">${medal}</div> <div class="rank-badge">${medal}</div>
<div class="score-name" title="${entry.name}">${entry.name}</div> <div class="score-name" title="Klikni za izbiro" onclick="document.getElementById('inputName').value='${entry.name.replace(/'/g, "\\'")}'">${entry.name}</div>
<div class="score-tens">${entry.tens}×10</div> <div class="score-tens">${entry.tens}×10</div>
<div class="score-pts">${entry.score}</div> <div class="score-pts">${entry.score}</div>
<button class="score-del" onclick="removeFromScoreboard(${entry.id})" title="Odstrani">✕</button> <button class="score-del" onclick="removeFromScoreboard(${entry.id})" title="Odstrani">✕</button>
@@ -826,10 +828,17 @@
resetScoresQuiet(); resetScoresQuiet();
} }
function computeRank(idx) {
const e = scoreboard[idx];
return scoreboard.filter(o =>
o.score > e.score || (o.score === e.score && o.tens > e.tens)
).length + 1;
}
function printLeaderboard() { function printLeaderboard() {
const medals = ['🥇','🥈','🥉']; const medals = ['🥇','🥈','🥉'];
const rows = scoreboard.map((e, idx) => { const rows = scoreboard.map((e, idx) => {
const rank = idx + 1; const rank = computeRank(idx);
const rc = rank <= 3 ? `r${rank}` : ''; const rc = rank <= 3 ? `r${rank}` : '';
const med = rank <= 3 ? medals[rank - 1] : rank; const med = rank <= 3 ? medals[rank - 1] : rank;
return `<tr> return `<tr>
+4 -2
View File
@@ -878,7 +878,7 @@
<div class="settings-group"> <div class="settings-group">
<h4 data-i18n="league.tournaments">Turnirji</h4> <h4 data-i18n="league.tournaments">Turnirji</h4>
<a href="/tournament" class="nav-link" id="tournamentModeLink">🏆 <span data-i18n="tournament.tournament_mode">Način Turnirja</span></a> <a href="/tournament" class="nav-link" id="tournamentModeLink">🏆 <span data-i18n="tournament.tournament_mode">Način Turnirja</span></a>
<a href="/calculator" class="nav-link">🎯 Kalkulator</a>
<a href="/archive/player-analysis" class="nav-link">👤 <span data-i18n="players.player_analysis">Analiza Igralcev</span></a> <a href="/archive/player-analysis" class="nav-link">👤 <span data-i18n="players.player_analysis">Analiza Igralcev</span></a>
<a href="/archive" class="nav-link">📚 <span data-i18n="navigation.archive">Arhiv</span></a> <a href="/archive" class="nav-link">📚 <span data-i18n="navigation.archive">Arhiv</span></a>
</div> </div>
@@ -1863,7 +1863,9 @@
list.style.display = ''; list.style.display = '';
list.innerHTML = data.map((e, idx) => { list.innerHTML = data.map((e, idx) => {
const rank = idx + 1; const rank = data.filter(o =>
o.score > e.score || (o.score === e.score && o.tens > e.tens)
).length + 1;
const rc = rank <= 3 ? `r${rank}` : ''; const rc = rank <= 3 ? `r${rank}` : '';
const med = rank === 1 ? '🥇' : rank === 2 ? '🥈' : rank === 3 ? '🥉' : rank; const med = rank === 1 ? '🥇' : rank === 2 ? '🥈' : rank === 3 ? '🥉' : rank;
return `<div class="lb-row ${rc}"> return `<div class="lb-row ${rc}">
+37
View File
@@ -776,6 +776,26 @@
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
} }
/* Nabijanje - Orange theme */
.type-option[data-type="nabijanje"] {
border-color: #f97316;
}
.type-option[data-type="nabijanje"]:hover {
border-color: #ea580c;
box-shadow: 0 4px 15px rgba(249, 115, 22, 0.25);
transform: translateY(-2px);
}
.type-option[data-type="nabijanje"].selected {
border-color: #ea580c;
background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
}
.type-option[data-type="nabijanje"]::before {
background: linear-gradient(90deg, #f97316 0%, #fbbf24 100%);
}
.type-option input[type="radio"] { .type-option input[type="radio"] {
margin-right: 10px; margin-right: 10px;
width: 18px; width: 18px;
@@ -1833,6 +1853,13 @@
<div class="type-description" data-i18n="tournament_types.40_targets_desc">Razširjeni format s 40 tarčami, 2 strela na tarčo (80 strelov skupaj)</div> <div class="type-description" data-i18n="tournament_types.40_targets_desc">Razširjeni format s 40 tarčami, 2 strela na tarčo (80 strelov skupaj)</div>
</div> </div>
</div> </div>
<div class="type-option" data-type="nabijanje" onclick="selectTournamentType('nabijanje')">
<input type="radio" name="tournament_type" value="nabijanje">
<div class="type-option-text">
<div class="type-name">💥 Nabijanje</div>
<div class="type-description">Prosti format z nastavljivo konfiguracijo tarč in strelov</div>
</div>
</div>
</div> </div>
</div> </div>
@@ -1944,6 +1971,11 @@
const radio = event.currentTarget.querySelector('input[type="radio"]'); const radio = event.currentTarget.querySelector('input[type="radio"]');
if (radio) radio.checked = true; if (radio) radio.checked = true;
const isNabijanje = type === 'nabijanje';
document.getElementById('startLeagueBtn').style.display = isNabijanje ? 'none' : '';
document.getElementById('startSingleBtn').textContent = isNabijanje
? '💥 Odpri Nabijanje'
: '🏅 ' + (window._i18n?.['league.start_single_tournament'] || 'Začni Posamezen Turnir');
} }
// Filter and search functions // Filter and search functions
@@ -2451,6 +2483,11 @@
// Start single tournament // Start single tournament
async function startSingleTournament() { async function startSingleTournament() {
if (selectedTournamentType === 'nabijanje') {
window.location.href = '/calculator';
return;
}
const enabledPlayers = players.filter(p => p.enabled); const enabledPlayers = players.filter(p => p.enabled);
if (enabledPlayers.length < 1) { if (enabledPlayers.length < 1) {