sandro/ninjiapi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

README angepasst

Browse Source
This commit is contained in:
sandro
2026-08-13 09:35:32 +02:00
parent 1533dd7c55
commit 20521febd5
6 changed files with 104 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/index.html
+21
View File
@@ -171,6 +171,16 @@
<label for="speed">Speed (Basis-Sekunden für 10 Karten)</label>
<input type="number" id="speed" value="200" min="5" max="1000" oninput="generateLink()">
</div>
<div class="form-group">
<label for="fontsize">Schriftgröße</label>
<input type="number" id="fontsize" value="15" min="5" max="70" oninput="generateLink()">
</div>
<div class="form-group">
<label for="height">Höhe des Overlays</label>
<input type="number" id="height" value="12" min="5" max="50" oninput="generateLink()">
</div>
<div class="form-group">
<label for="bg">Hintergrundfarbe (Chroma-Key)</label>
@@ -204,6 +214,11 @@
<input type="checkbox" id="showdivision" onchange="generateLink()">
<label for="showdivision">Divisions-Icon bei jeder Karte anzeigen</label>
</div>
<div class="form-group checkbox-group">
<input type="checkbox" id="showtimes" onchange="generateLink()">
<label for="showtimes">Part-Zeiten ausblenden</label>
</div>
<div class="result-section">
<label>Generierter Link:</label>
@@ -219,11 +234,14 @@
function generateLink() {
const user = document.getElementById('user').value.trim();
const speed = document.getElementById('speed').value;
const fontsize = document.getElementById('fontsize').value;
const height = document.getElementById('height').value;
const bg = document.getElementById('bg').value.replace('#', '');
const framecolor = document.getElementById('framecolor').value.replace('#', '');
const fix = document.getElementById('fix').value;
const fixdivision = document.getElementById('fixdivision').value;
const showdivision = document.getElementById('showdivision').checked;
const showtimes = document.getElementById('showtimes').checked;
// Basis-URL zur ninjiclassic.html im selben Verzeichnis ermitteln
const baseUrl = window.location.href.substring(0, window.location.href.lastIndexOf('/') + 1) + 'ninjiclassic.html';
@@ -231,11 +249,14 @@
const params = new URLSearchParams();
if (user) params.append('user', user);
if (speed && speed !== '240') params.append('speed', speed);
if (height) params.append('height', height);
if (fontsize) params.append('fontsize', fontsize);
if (bg && bg !== '00ff00') params.append('bg', bg);
if (framecolor && framecolor !== '000000') params.append('framecolor', framecolor);
if (fix) params.append('fix', fix);
if (fixdivision) params.append('fixdivision', fixdivision);
if (showdivision) params.append('showdivision', 'true');
if (showtimes) params.append('showtimes', 'false');
const queryString = params.toString();
const finalLink = baseUrl + (queryString ? '?' + queryString : '');
html/ninjiclassic.html
+55 -32
View File
@@ -14,6 +14,10 @@
--gold: #f59e0b;
--border-color: #334155;
--frame-color: #000000;
--font-size: 0.9rem;
--card-padding-v: 6px;
--card-padding-h: 14px;
--icon-size: 28px;
}
* {
@@ -33,7 +37,6 @@
overflow: hidden;
}
/* Haupt-Container, der Ränder und Layout steuert */
.ticker-main {
display: flex;
width: 100%;
@@ -45,7 +48,6 @@
background: rgba(15, 23, 42, 0);
}
/* Container für fixierte Elemente (User oder Division) */
.fixed-container {
flex-shrink: 0;
z-index: 10;
@@ -57,7 +59,6 @@
display: none;
}
/* Der Wrapper für den scrollenden Teil */
.ticker-wrapper {
flex-grow: 1;
overflow: hidden;
@@ -65,8 +66,6 @@
position: relative;
}
/* Verläufe (before & after) wurden hier komplett entfernt, um sauberes Chroma-Keying zu ermöglichen */
.ticker-content {
display: inline-flex;
gap: 10px;
@@ -77,20 +76,18 @@
animation-play-state: paused;
}
/* Kompakte, flache Karte */
.player-card {
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 6px 14px;
padding: var(--card-padding-v) var(--card-padding-h);
display: flex;
align-items: center;
gap: 12px;
font-size: 0.9rem;
font-size: var(--font-size);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
/* Farbschemata für die einzelnen Divisionen */
.player-card.division-champion { background: #171717; border-color: #333333; }
.player-card.division-master { background: #480000; border-color: #8b0000; }
.player-card.division-diamant { background: #471830; border-color: #882b5d; }
@@ -99,20 +96,18 @@
.player-card.division-silver { background: #2d2d2d; border-color: #5c5c5c; }
.player-card.division-bronze { background: #2f1a03; border-color: #6b3b07; }
/* Spezielles Highlight für den User mit dynamischer Rahmenfarbe */
.player-card.highlight {
border-color: var(--frame-color) !important;
box-shadow: 0 0 0 3px var(--frame-color) !important;
}
/* Styling für die Divisions-Karte */
.player-card.division-card {
padding: 6px 16px;
padding: var(--card-padding-v) calc(var(--card-padding-h) + 2px);
gap: 8px;
}
.division-title {
font-size: 0.75rem;
font-size: calc(var(--font-size) * 0.85);
font-weight: 800;
letter-spacing: 1px;
color: #bae6fd;
@@ -120,14 +115,14 @@
}
.division-name {
font-size: 1rem;
font-size: var(--font-size);
font-weight: 800;
color: #ffffff;
}
.division-icon-large {
width: 28px;
height: 28px;
width: var(--icon-size);
height: var(--icon-size);
object-fit: contain;
}
@@ -141,7 +136,7 @@
background: var(--border-color);
color: var(--accent);
font-weight: bold;
font-size: 0.8rem;
font-size: var(--font-size);
padding: 2px 6px;
border-radius: 4px;
}
@@ -165,7 +160,7 @@
align-items: center;
gap: 8px;
color: var(--text-muted);
font-size: 0.85rem;
font-size: var(--font-size);
}
.divider {
@@ -207,9 +202,27 @@
const frameColor = urlParams.get('framecolor');
const divisionEveryCard = urlParams.get('showdivision');
// NEU: Parameter zum Steuern der P1/P2-Zeiten (Standard ist true)
const showTimes = urlParams.get('showtimes') !== 'false';
const fixPosition = (urlParams.get('fix') || '').toLowerCase();
const fixDivision = (urlParams.get('fixdivision') || '').toLowerCase();
const fontSizeParam = urlParams.get('fontsize');
const heightParam = urlParams.get('height');
if (fontSizeParam) {
const formattedSize = /^\d+$/.test(fontSizeParam) ? `${fontSizeParam}px` : fontSizeParam;
document.documentElement.style.setProperty('--font-size', formattedSize);
const iconSize = /^\d+$/.test(fontSizeParam) ? `${parseInt(fontSizeParam) * 1.6}px` : '28px';
document.documentElement.style.setProperty('--icon-size', iconSize);
}
if (heightParam) {
const formattedHeight = /^\d+$/.test(heightParam) ? `${heightParam}px` : heightParam;
document.documentElement.style.setProperty('--card-padding-v', formattedHeight);
}
if (bgColor) {
const formattedColor = bgColor.startsWith('#') ? bgColor : `#${bgColor}`;
document.documentElement.style.setProperty('--bg-color', formattedColor);
@@ -234,6 +247,26 @@
const divName = (item.division || 'master').toLowerCase();
const dynamicBgClass = `division-${divName}`;
// Dynamischer HTML-Teil für die Zeiten (abhängig von showTimes)
let timesHTML = '';
if (showTimes) {
timesHTML = `
<div class="card-info">
<span class="divider">|</span>
<span>P1: ${item.part1} / P2: ${item.part2}</span>
<span class="divider">|</span>
<span class="total-time">${item.totalTime}s</span>
</div>
`;
} else {
timesHTML = `
<div class="card-info">
<span class="divider">|</span>
<span class="total-time">${item.totalTime}s</span>
</div>
`;
}
if (divisionEveryCard) {
const imgPath = `img/${divName}.png`;
@@ -243,12 +276,7 @@
<span class="rank-badge ${isTopRank}">#${item.divisionRank ?? '-'}</span>
<span class="player-name">${item.player}</span>
<img src="${item.flag}" class="division-icon-large" alt="" onerror="this.style.display='none'">
<div class="card-info">
<span class="divider">|</span>
<span>P1: ${item.part1} / P2: ${item.part2}</span>
<span class="divider">|</span>
<span class="total-time">${item.totalTime}s</span>
</div>
${timesHTML}
<img src="${item.grindState}" class="division-icon-large" alt="" onerror="this.style.display='none'">
</div>
`;
@@ -258,13 +286,8 @@
<div class="player-card ${highlightClass} ${dynamicBgClass}">
<span class="rank-badge ${isTopRank}">#${item.divisionRank ?? '-'}</span>
<span class="player-name">${item.player}</span>
<img src="${item.flag}" class="division-icon-large" alt="" onerror="this.style.display='none'">
<div class="card-info">
<span class="divider">|</span>
<span>P1: ${item.part1} / P2: ${item.part2}</span>
<span class="divider">|</span>
<span class="total-time">${item.totalTime}s</span>
</div>
<img src="${item.flag}" class="division-icon-large" alt="" onerror="this.style.display='none'">
${timesHTML}
<img src="${item.grindState}" class="division-icon-large" alt="" onerror="this.style.display='none'">
</div>
`;
@@ -357,4 +380,4 @@
setInterval(loadApiData, REFRESH_INTERVAL);
</script>
</body>
</html>
</html>