220 lines
8.2 KiB
JavaScript
220 lines
8.2 KiB
JavaScript
// СпортПортал — данные и логика (мок-данные, фаза 1)
|
||
|
||
const SPORTS = [
|
||
{
|
||
icon: "trophy",
|
||
name: "Футбол",
|
||
desc: "Премьер-лига, Кубок, трансферы и лучшие моменты.",
|
||
chip: "12 матчей сегодня",
|
||
},
|
||
{
|
||
icon: "dashboard",
|
||
name: "Теннис",
|
||
desc: "Туры ATP/WTA, турниры Большой четвёрки, рейтинги.",
|
||
chip: "Полуфиналы турнира",
|
||
},
|
||
{
|
||
icon: "chart",
|
||
name: "Хоккей",
|
||
desc: "КХЛ, НХЛ: очки, шайбы и гонка бомбардиров.",
|
||
chip: "Турнирная таблица КХЛ",
|
||
},
|
||
{
|
||
icon: "users",
|
||
name: "Бокс",
|
||
desc: "Большие бои, рейтинги и история рекордов.",
|
||
chip: "Пояс WBA в игре",
|
||
},
|
||
];
|
||
|
||
const LEAGUES = {
|
||
premier: {
|
||
label: "Премьер-лига",
|
||
cols: ["И", "В", "Н", "П", "ГЗ", "ГП"],
|
||
rows: [
|
||
["Арсенал", 38, 24, 10, 4, 78, 32],
|
||
["Ливерпуль", 38, 23, 11, 4, 85, 34],
|
||
["Манчестер Сити", 38, 22, 8, 8, 80, 41],
|
||
["Челси", 38, 20, 8, 10, 64, 42],
|
||
["Лестер", 38, 19, 7, 12, 58, 44],
|
||
["Тоттенхэм", 38, 18, 7, 13, 54, 44],
|
||
],
|
||
},
|
||
laliga: {
|
||
label: "Ла Лига",
|
||
cols: ["И", "В", "Н", "П", "ГЗ", "ГП"],
|
||
rows: [
|
||
["Реал Мадрид", 38, 27, 4, 7, 78, 33],
|
||
["Барселона", 38, 26, 5, 7, 87, 38],
|
||
["Атлетико", 38, 21, 9, 8, 64, 35],
|
||
["Атлетик", 38, 17, 11, 10, 47, 36],
|
||
["Райо", 38, 15, 10, 13, 44, 45],
|
||
["Вильярреал", 38, 14, 12, 12, 55, 43],
|
||
],
|
||
},
|
||
khl: {
|
||
label: "КХЛ",
|
||
cols: ["И", "В", "Н", "П", "ШЗ", "ШП"],
|
||
rows: [
|
||
["СКА", 60, 42, 6, 12, 180, 98],
|
||
["ЦСКА", 60, 40, 6, 14, 172, 101],
|
||
["Ак Барс", 60, 38, 5, 17, 160, 97],
|
||
["Локомотив", 60, 35, 6, 19, 148, 104],
|
||
["Металлург", 60, 32, 5, 23, 137, 115],
|
||
["Авангард", 60, 30, 5, 25, 140, 121],
|
||
],
|
||
},
|
||
nhl: {
|
||
label: "НХЛ",
|
||
cols: ["И", "В", "Н", "П", "ШЗ", "ШП"],
|
||
rows: [
|
||
["Эдмонтон", 82, 48, 10, 24, 290, 238],
|
||
["Виннипег", 82, 46, 10, 26, 271, 227],
|
||
["Филадельфия", 82, 44, 10, 28, 263, 237],
|
||
["Даллас", 82, 44, 0, 38, 270, 215],
|
||
["Колорадо", 82, 42, 8, 32, 286, 235],
|
||
["Нэшвилл", 82, 41, 8, 33, 265, 240],
|
||
],
|
||
},
|
||
};
|
||
|
||
const MATCHES = [
|
||
{ sport: "Футбол", home: "Арсенал", away: "Челси", score: "2:1", time: "Финал" },
|
||
{ sport: "Футбол", home: "Реал Мадрид", away: "Барселона", score: "1:1", time: "110-я минута" },
|
||
{ sport: "Теннис", home: "Сафара", away: "Медведев", score: "3:2", time: "Победа Сафары" },
|
||
{ sport: "Хоккей", home: "СКА", away: "ЦСКА", score: "3:2", time: "После буллитов" },
|
||
{ sport: "Бокс", home: "Алимхан", away: "Гарсия", score: "TKO", time: "раунд 9" },
|
||
];
|
||
|
||
const ARTICLES = [
|
||
{
|
||
sport: "Футбол",
|
||
date: "22.09.2026",
|
||
title: "Как Премьер-лига дошла до рекордной гонки за титул",
|
||
excerpt: "Впервые за десять лет три команды делят первые места с разницей в два очка. Разбираем, что решает чемпионство.",
|
||
},
|
||
{
|
||
sport: "Теннис",
|
||
date: "21.09.2026",
|
||
title: "Медведев и Сафара: разбор полуфинала турнира",
|
||
excerpt: "Пять сетов, 3 часа 12 минут. Ключевые моменты и статистика матча, который войдёт в историю турнира.",
|
||
},
|
||
{
|
||
sport: "Хоккей",
|
||
date: "20.09.2026",
|
||
title: "Гонка бомбардиров КХЛ: кто впереди и почему",
|
||
excerpt: "Три форварда набрали больше 40 очков. Сравниваем их стили игры и роли в командах.",
|
||
},
|
||
{
|
||
sport: "Бокс",
|
||
date: "19.09.2026",
|
||
title: "Большой бой года: что ждать от реванша",
|
||
excerpt: "Два чемпиона, два стиля и титул в двух версиях. Прогнозы экспертов и история их предыдущего боя.",
|
||
},
|
||
{
|
||
sport: "Футбол",
|
||
date: "18.09.2026",
|
||
title: "Молодые вратари, которые изменят Европу",
|
||
excerpt: "Обзор пяти голкиперов до 22 лет, которые в этом сезоне уже доказали класс. Где посмотреть их игры.",
|
||
},
|
||
{
|
||
sport: "Теннис",
|
||
date: "17.09.2026",
|
||
title: "Как изменился грунтовый сезон за десять лет",
|
||
excerpt: "Цифры и тренды: скорости подачи, длина матчей и новые герои сезона на медленных кортах.",
|
||
},
|
||
];
|
||
|
||
const fmtDate = (s) => s;
|
||
|
||
function icon(name) {
|
||
return `<svg class="kt-ai-icon" aria-hidden="true"><use href="#${name}"></use></svg>`;
|
||
}
|
||
|
||
function renderSports() {
|
||
const grid = document.getElementById("sports-grid");
|
||
if (!grid) return;
|
||
grid.style.gridTemplateColumns = "repeat(4, 1fr)";
|
||
grid.innerHTML = SPORTS.map((s) => `
|
||
<article class="kt-ai-tile" style="display:flex; flex-direction:column;">
|
||
<div class="sport-tile-head">
|
||
<span class="sport-badge">${icon(s.icon)}</span>
|
||
<h3>${s.name}</h3>
|
||
</div>
|
||
<p>${s.desc}</p>
|
||
<div class="tile-more">
|
||
<span class="kt-ai-chip">${s.chip}</span>
|
||
</div>
|
||
</article>
|
||
`).join("");
|
||
}
|
||
|
||
function renderLeagueTabs() {
|
||
const tabs = document.getElementById("league-tabs");
|
||
if (!tabs) return;
|
||
tabs.innerHTML = Object.entries(LEAGUES).map(([key, l], i) => `
|
||
<button class="kt-ai-btn" data-league="${key}" data-variant="${i === 0 ? "primary" : "ghost"}">${l.label}</button>
|
||
`).join("");
|
||
tabs.addEventListener("click", (e) => {
|
||
const btn = e.target.closest("[data-league]");
|
||
if (!btn) return;
|
||
tabs.querySelectorAll("button").forEach((b) => b.setAttribute("data-variant", "ghost"));
|
||
btn.setAttribute("data-variant", "primary");
|
||
renderTable(btn.dataset.league);
|
||
});
|
||
}
|
||
|
||
function renderTable(key) {
|
||
const league = LEAGUES[key] || LEAGUES.premier;
|
||
const table = document.getElementById("league-table");
|
||
if (!table) return;
|
||
const head = `<tr><th>#</th><th>Команда</th>${league.cols.map((c) => `<th>${c}</th>`).join("")}</tr>`;
|
||
const body = league.rows.map((r, i) => {
|
||
const pts = r[1] * 3 + r[2];
|
||
return `
|
||
<tr class="${i < 3 ? "top" : ""}">
|
||
<td><span class="pos">${i + 1}</span></td>
|
||
<td>${r[0]}</td>
|
||
<td style="text-align:center; font-variant-numeric: tabular-nums;">${pts}</td>
|
||
${r.slice(1).map((v) => `<td style="text-align:center; font-variant-numeric: tabular-nums;">${v}</td>`).join("")}
|
||
</tr>`;
|
||
}).join("");
|
||
table.innerHTML = head + `<tbody class="nums">${body}</tbody>`;
|
||
}
|
||
|
||
function renderMatches() {
|
||
const strip = document.getElementById("match-strip");
|
||
if (!strip) return;
|
||
strip.innerHTML = MATCHES.map((m) => `
|
||
<div class="match">
|
||
<div class="vs"><span>${m.home}</span><span>${m.away}</span></div>
|
||
<div class="score">${m.score}</div>
|
||
<div class="info">${m.sport} · ${m.time}</div>
|
||
</div>
|
||
`).join("");
|
||
}
|
||
|
||
function renderArticles() {
|
||
const grid = document.getElementById("article-grid");
|
||
if (!grid) return;
|
||
grid.innerHTML = ARTICLES.map((a) => `
|
||
<article class="kt-ai-card article" style="padding: 16px;">
|
||
<div class="article-meta">
|
||
<span class="kt-ai-chip">${a.sport}</span>
|
||
<span>${fmtDate(a.date)}</span>
|
||
</div>
|
||
<h3>${a.title}</h3>
|
||
<p class="excerpt">${a.excerpt}</p>
|
||
<a class="kt-ai-link" href="#articles">Читать далее →</a>
|
||
</article>
|
||
`).join("");
|
||
}
|
||
|
||
document.addEventListener("DOMContentLoaded", () => {
|
||
renderSports();
|
||
renderLeagueTabs();
|
||
renderTable("premier");
|
||
renderMatches();
|
||
renderArticles();
|
||
});
|