Web Dev - выберите Top3 всех данных (файл json) [закрыто] ⇐ Javascript

[Anonymous]

Я застрял в этой части. Он всегда добавляет поле CSS в каждом TOP3 данных каждой страницы, но то, что я хочу, - это добавление CSS -поле только в TOP3 всех данных. даже чат GPT не могу решить это < /strong>
Подробнее: я использую GitHub и .jsonfile для сбора данных из моей игры < /p>
Здесь код < /p>





.leaderboard-container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 800px;
width: 100%;
flex: 1 0 auto;
text-align: center;
}

.leaderboard-entry {
padding: 5px;
border-bottom: 1px solid #ddd;
cursor: pointer;
}

.leaderboard-container #leaderboard-content {
text-align: center;
align-items: flex-end;
flex-wrap: wrap;
display: flex;
}

.leaderboard-container #leaderboard-content > div:nth-child(1) {
display: inline-block;
font-size: 27px;
width: 30%;
height: 360px;
text-align: center;
position: relative;
margin: 7.5px;
border: solid 1px black;
box-sizing: border-box;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 2px;
box-shadow: 0px -1px 0px 0px rgb(0, 0, 0), 1px 0px 0px 0px rgb(0, 0, 0),
2px -1px 0px 0px rgba(0, 0, 0), 3px -2px 0px 0px rgba(0, 0, 0),
4px -3px 0px 0px rgba(0, 0, 0), 5px -4px 0px 0px rgba(0, 0, 0),
6px -5px 0px 0px rgba(0, 0, 0), 7px -6px 0px 0px rgba(0, 0, 0),
8px -7px 0px 0px rgba(0, 0, 0);
}

.leaderboard-container #leaderboard-content > div:nth-child(2) {
display: inline-block;
font-size: 30px;
width: 30%;
height: 400px;
text-align: center;
position: relative;
margin: 7.5px;
border: solid 1px black;
box-shadow: 0px -1px 0px 0px rgb(0, 0, 0), 1px 0px 0px 0px rgba(0, 0, 0),
2px -1px 0px 0px rgba(0, 0, 0), 3px -2px 0px 0px rgba(0, 0, 0),
4px -3px 0px 0px rgba(0, 0, 0), 5px -4px 0px 0px rgba(0, 0, 0),
6px -5px 0px 0px rgba(0, 0, 0), 7px -6px 0px 0px rgba(0, 0, 0),
8px -7px 0px 0px rgba(0, 0, 0);
}

.leaderboard-container #leaderboard-content > div:nth-child(3) {
display: inline-block;
font-size: 25px;
width: 30%;
height: 320px;
text-align: center;
position: relative;
margin: 7.5px;
border: solid 1px black;
box-shadow: 0px -1px 0px 0px rgb(0, 0, 0), 1px 0px 0px 0px rgba(0, 0, 0),
2px -1px 0px 0px rgba(0, 0, 0), 3px -2px 0px 0px rgba(0, 0, 0),
4px -3px 0px 0px rgba(0, 0, 0), 5px -4px 0px 0px rgba(0, 0, 0),
6px -5px 0px 0px rgba(0, 0, 0), 7px -6px 0px 0px rgba(0, 0, 0),
8px -7px 0px 0px rgba(0, 0, 0);
}

#leaderboard-content > div:hover {
transform: scale(1.05);
}

.leaderboard-container #leaderboard-content > div:nth-child(n + 4) {
display: flex; /* Keep consistent with flex layout */
width: 90%;
font-size: 15px;
text-align: center;
justify-content: space-between; /* Align content properly */
align-items: center; /* Align text with entries */
left: 0; /* Remove offset */
}

.leaderboard-entry:last-child {
border-bottom: none;
}

.leaderboard-entry:hover {
background-color: #f0f0f0;
}









let currentPage = 1
const itemsPerPage = 6
let leaderboardData = []

function renderLeaderboard() {
const leaderboardContent = document.getElementById('leaderboard-content')
leaderboardContent.innerHTML = ''

// Sort leaderboard data in descending order of score
leaderboardData.sort((a, b) => b.score - a.score)

// Extract top 3 players globally (this should only show up once)
const top3Data = leaderboardData.slice(0, 3)

// Render top 3 leaderboard entries (always at the top)
top3Data.forEach((entry, index) => {
const entryDiv = document.createElement('div')
entryDiv.classList.add('leaderboard-top')

let rank = index + 1
const rankSpan = document.createElement('span')
rankSpan.classList.add('rank')

if (rank === 1) {
rankSpan.textContent = ' 1st'
entryDiv.classList.add('gold')
} else if (rank === 2) {
rankSpan.textContent = ' 2nd'
entryDiv.classList.add('silver')
} else if (rank === 3) {
rankSpan.textContent = ' 3rd'
entryDiv.classList.add('bronze')
}

appendEntryDetails(entryDiv, entry, rankSpan)
leaderboardContent.appendChild(entryDiv)
})

// Handle pagination for remaining entries (beyond top 3)
const remainingEntries = leaderboardData.slice(3) // Start after top 3
const startIdx = (currentPage - 1) * itemsPerPage
const endIdx = startIdx + itemsPerPage
const pageEntries = remainingEntries.slice(startIdx, endIdx)

// Render paginated leaderboard entries (from 4th place onward)
pageEntries.forEach((entry, index) => {
const entryDiv = document.createElement('div')
entryDiv.classList.add('leaderboard-entry')

const rankSpan = document.createElement('span')
rankSpan.classList.add('rank')
rankSpan.textContent = `#${3 + startIdx + index + 1}` // Adjusted rank

appendEntryDetails(entryDiv, entry, rankSpan)
leaderboardContent.appendChild(entryDiv)
})

// Update pagination UI
document.getElementById('page-number').textContent = `${currentPage}`
document.getElementById('prev-btn').disabled = currentPage === 1
document.getElementById('next-btn').disabled =
endIdx >= remainingEntries.length
}

// Helper function to append player details
function appendEntryDetails(entryDiv, entry, rankSpan) {
const name = document.createElement('h2')
name.textContent = entry.name

const score = document.createElement('p')
score.classList.add('score')
score.textContent = `Score: ${entry.score}`

const topicScoresDiv = document.createElement('div')
topicScoresDiv.classList.add('topic-scores')

try {
const topicScores = JSON.parse(entry.topicScores).scores
topicScores.forEach((topic) => {
const topicScore = document.createElement('p')
topicScore.textContent = `${topic.topic}: ${topic.score} (${topic.scoreRatio})`
topicScoresDiv.appendChild(topicScore)
})
} catch (e) {
console.error('Error parsing topic scores:', e)
}

entryDiv.appendChild(rankSpan)
entryDiv.appendChild(name)
entryDiv.appendChild(score)
entryDiv.appendChild(topicScoresDiv)
}





Подробнее здесь: https://stackoverflow.com/questions/795 ... ajson-file