const typeTeam = ‘nations-championship’;
const urlApi = `https://rugby-app-4ebacff10fda.herokuapp.com/rencontres/index_one?type_team=${typeTeam}`;async function fetchTeams() {
document.getElementById(« loader »).style.display = « block »;
const response = await fetch(urlApi);
const data = await response.json();
document.getElementById(« loader »).style.display = « none »;
console.log(data);
data.forEach(group => {
const poule = group.poule;
const selectedJournee = group.selected_journee;
const allJournees = group.all_journees;const pouleContainer = document.createElement(« div »);
pouleContainer.className = ‘my-poule-container’;const pouleTitle = document.createElement(« span »);
pouleTitle.className = ‘my-poule-title’;
pouleTitle.innerHTML = `Poule: ${poule}`;
const table = document.createElement(« table »);
table.className = ‘my-table’;const titleSelectDiv = document.createElement(« div »);
titleSelectDiv.className = ‘my-title-select-div’;
titleSelectDiv.appendChild(pouleTitle);const journeeContainer = document.createElement(« div »);
journeeContainer.className = ‘my-journee-container’;const leftArrow = document.createElement(« span »);
leftArrow.className = ‘my-arrow-left’;
// leftArrow.innerHTML = ‘â—€’;
leftArrow.addEventListener(« click », () => scrollJourneeList(poule, ‘prev’));const rightArrow = document.createElement(« span »);
rightArrow.className = ‘my-arrow-right’;
// rightArrow.innerHTML = ‘â–¶’;
rightArrow.addEventListener(« click », () => scrollJourneeList(poule, ‘next’));const journeeList = document.createElement(« ul »);
journeeList.className = ‘my-journee-list’;
journeeList.id = `journeeList${poule}`;allJournees.forEach(journee => {
const listItem = document.createElement(« li »);
listItem.className = ‘my-journee-item’;
listItem.innerText = journee;
listItem.dataset.journee = journee;
if (journee === selectedJournee) {
listItem.classList.add(‘selected’);
}
listItem.addEventListener(« click », () => selectJournee(poule, journee));
journeeList.appendChild(listItem);
});journeeContainer.appendChild(leftArrow);
journeeContainer.appendChild(journeeList);
journeeContainer.appendChild(rightArrow);titleSelectDiv.appendChild(journeeContainer);
pouleContainer.appendChild(table);
pouleContainer.insertBefore(titleSelectDiv, table);document.getElementById(« myMainContainer »).appendChild(pouleContainer);
populateTable(poule, selectedJournee, group.rencontres, pouleContainer);
});
}
function formatJournee(journee) {
const journeeNum = journee.match(/d+/)[0]; // Extraire le numéro de la journée
return `Journée ${journeeNum}`; // Formater le texte
}
function decodeHtml(html) {
const txt = document.createElement(« textarea »);
txt.innerHTML = html;
return txt.value;
}
function selectJournee(poule, journee) {
const journeeList = document.getElementById(`journeeList${poule}`);
Array.from(journeeList.children).forEach(item => {
item.classList.remove(‘selected’);
if (item.dataset.journee === journee) {
item.classList.add(‘selected’);
}
});
fetchJourneeData(poule, journee);
}function scrollJourneeList(poule, direction) {
const journeeList = document.getElementById(`journeeList${poule}`);
const scrollAmount = 100;
if (direction === ‘prev’) {
journeeList.scrollLeft -= scrollAmount;
} else {
journeeList.scrollLeft += scrollAmount;
}
}
async function fetchJourneeData(poule, journee) {
const response = await fetch(`https://rugby-app-4ebacff10fda.herokuapp.com/rencontres/by_journee?type_team=${typeTeam}&journee=${journee}&poule=${poule}`);
const newData = await response.json();
const pouleContainer = document.querySelector(`.my-poule-container:has(#journeeList${poule})`);
populateTable(poule, journee, newData.rencontres, pouleContainer);
}function createCell2Content(rencontre, cell2) {
cell2.innerHTML = « »;
const dateOptions = { year: ‘numeric’, month: ‘long’, day: ‘numeric’, timeZone: ‘Europe/Paris’ };
const timeOptions = { hour: ‘2-digit’, minute: ‘2-digit’, second: ‘2-digit’, timeZone: ‘Europe/Paris’ };
const date = new Date(rencontre.date);const dateDiv = document.createElement(« div »);
dateDiv.className = « my-datetime »;
const scoreDiv = document.createElement(« div »);
scoreDiv.className = « my-score »;if (rencontre.etat === ‘endirect’ || rencontre.etat === ‘termine’) {
scoreDiv.className = `my-score-box ${rencontre.etat === ‘endirect’ ? ‘my-live-text’ : »}`;
scoreDiv.innerHTML = `${rencontre.rencontre_resultat_locale.pointsDeMarque} – ${rencontre.rencontre_resultat_visiteuse.pointsDeMarque}`;
cell2.appendChild(scoreDiv);
} else {
dateDiv.innerHTML = `${date.toLocaleDateString(‘fr-FR’, dateOptions)}
${date.toLocaleTimeString(‘fr-FR’, timeOptions)}`;
cell2.appendChild(dateDiv);
}
}function populateTable(poule, selectedJournee, rencontres, pouleContainer) {
const existingTable = pouleContainer.querySelector(‘.my-table’);
if (existingTable) existingTable.remove();
const table = document.createElement(« table »);
table.className = ‘my-table’;
table.id = ‘table’ + poule;
pouleContainer.appendChild(table);
const filteredRencontres = rencontres.filter(r => r.day === selectedJournee).sort((a, b) => new Date(a.date) – new Date(b.date));
filteredRencontres.forEach(rencontre => {
const row = table.insertRow();
row.id = `row-${poule}-${rencontre.id}`;
row.classList.add(‘my-row-link’);
row.addEventListener(« click », () => {
window.location.href = `https://vibrez-rugby.com/live-en-direct/?id=${rencontre.id}`;
});const cell1 = row.insertCell(0);
cell1.innerHTML = `
${rencontre.local_team.display_name}`;const cell2 = row.insertCell(1);
cell2.className = ‘my-cell2’;
createCell2Content(rencontre, cell2);const cell3 = row.insertCell(2);
cell3.innerHTML = `
${rencontre.visitor_team.display_name}`;
});
}async function updateScoresAndStatus() {
const response = await fetch(urlApi);
const data = await response.json();data.forEach(({ poule, selected_journee, rencontres }) => {
rencontres.forEach(rencontre => {
const row = document.getElementById(`row-${poule}-${rencontre.id}`);
if (!row) return;
const cell2 = row.cells[1];
createCell2Content(rencontre, cell2);
});
});
}let countdown = 60;
const countdownElement = document.querySelector(‘.reload-counter’);
countdownElement.id = « countdown »;
countdownElement.innerText = `Rechargement dans ${countdown} s`;
function updateCountdown() {
countdown–;
countdownElement.innerText = `Rechargement dans ${countdown} s`;
if (countdown 0) {
const firstSelectedItem = selectedItems[0];
firstSelectedItem.scrollIntoView({ behavior: ‘smooth’, block: ‘center’, inline: ‘center’ });
}
}fetchTeams().then(() => {
scrollToSelectedJournee();
});
setInterval(updateCountdown, 1000);#countdown {
font-size: 13px;
font-weight: bold;
color: #444;
background-color: #f2f2f2;
padding: 2px;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
margin-top: 5px;
display: inline-block;
}
.my-table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
}
table, tr, th, td {
vertical-align: middle;
}
table tbody > tr:nth-child(2n+1) > td, table tbody > tr:nth-child(2n+1) > th {
background-color: hsla(0, 0%, 100%, 0.67);
}
.my-table th, .my-table td {
border: none !important;
text-align: center;
transition: all 0.3s;
vertical-align: middle;
padding: 8px;
}
table tbody > tr:nth-child(2n+1) > td, {
background-color: white;
}.my-table tr:nth-child(even) {
background-color: #004d9017;
}
.my-datetime {
border-radius: 5px;
}
.my-embleme {
display: block;
margin: auto;
max-height: 40px;
max-width: 40px;
}
.my-time {
display: block;
margin-top: 5px;
color: #555;
font-weight: bold;
}
.my-score-box {
display: inline-block;
background-color: #423f3f;
font-weight: bold;
color: #fff;
padding: 10px;
min-width: 90px;
border-radius: 5px;
border: solid #000 1px;
}.my-live-text {
background-color: rgb(230, 11, 11);
color: white;
}
.my-row-link {
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
}
.my-row-link:hover {
background-color: #f0f0f0; /* Change de couleur de fond au survol */
transform: scale(1.02); /* Légère augmentation de la taille pour attirer l’attention */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Ajout d’une ombre pour un effet de profondeur */
}
.my-poule-container {
flex-direction: column;
align-items: flex-start;
margin-top: 20px;
}
.my-poule-title, .my-journee-select {
margin-right: 10px;
}
.my-club-name {
margin-top: 5px;
color: #444;
}.my-title-select-div {
width: 100%;
text-align: center;
background: linear-gradient(to right, #004d90eb, #00326a);
color: white;
border-radius: 4px 4px 0 0;
padding: 10px 0 10px 0;
}
.my-journee-container {
display: flex;
justify-content: center;
}
.my-arrow-left, .my-arrow-right {
display: inline-block;
width: 0;
height: 0;
cursor: pointer;
margin: 0 10px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}.my-arrow-left {
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-right: 16px solid white; /* Flèche blanche pointant à gauche */
}.my-arrow-right {
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 16px solid white; /* Flèche blanche pointant à droite */
}.my-arrow-left:hover, .my-arrow-right:hover {
transform: scale(1.2); /* Agrandit légèrement la flèche */}/* Effet d’ombre autour de la flèche */
.my-arrow-left::before, .my-arrow-right::before {
content: « »;
position: absolute;
display: inline-block;
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
top: 2px;
left: 2px;
transition: all 0.3s ease;
}.my-journee-list {
display: flex;
list-style: none;
padding: 0;
margin: 0;
overflow-x: auto;
white-space: nowrap;
scrollbar-width: none;
}
.my-journee-item {
padding: 5px 15px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s;
}
.my-journee-item.selected {
background-color: #dd2e44;
color: white;
font-weight: bold;
}
.loader {
display: block;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 32px;
width: 200px;
background: #fff;
border: 2px solid #fff;
color: red;
overflow: hidden;
z-index: 1000;
}
.loader::before{
content: »;
background: red;
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
animation: loading 10s linear infinite;
}
.loader:after{
content: »;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
font-size: 24px;
line-height: 32px;
color: rgb(0,255,255);
mix-blend-mode: difference;
animation: percentage 10s linear infinite;
}
@keyframes loading {
0% { width: 0 }
100% { width: 100% }
}
@keyframes percentage {
0% { content: « 0% »}
5% { content: « 5% »}
10% { content: « 10% »}
20% { content: « 20% »}
30% { content: « 30% »}
40% { content: « 40% »}
50% { content: « 50% »}
60% { content: « 60% »}
70% { content: « 70% »}
80% { content: « 80% »}
90% { content: « 90% »}
95% { content: « 95% »}
96% { content: « 96% »}
97% { content: « 97% »}
98% { content: « 98% »}
99% { content: « 99% »}
100% { content: « 100% »}
}
@media (max-width: 640px) {
.my-score-box {
font-size: 12px;
}
.my-datetime {
font-size: 12px;
}
.my-club-link {
font-size: 13px;
}
.my-embleme {
max-height: 25px;
max-width: 25px;
}
.my-arrow {
font-size: 18px;
margin: 0 5px;
}
}
