// Configuration const LANGUAGE_CODE = "en-US"; const LANGUAGE = "en"; const dataset = "gpblog"; // Default dataset const customSeasonSlug = null; // Can be set via URL parameter const DEBUG = true; // Set to true to enable debug logs // Stages translations object for all supported languages const stagesLabels = { en: { "Practice": "Practice", "Qualification": "Qualification", "Race": "Race", "Sprint Race": "Sprint Race", "Sprint Shootout": "Sprint Shootout", "First Practice": "First Practice", "Second Practice": "Second Practice", "Third Practice": "Third Practice", "Last Practice": "Last Practice", "First Qualification": "First Qualification", "Second Qualification": "Second Qualification", "Third Qualification": "Third Qualification", "Sprint Shootout 1": "Sprint Shootout 1", "Sprint Shootout 2": "Sprint Shootout 2", "Sprint Shootout 3": "Sprint Shootout 3", // UI labels "upcoming_race": "Upcoming race", "overview": "Overview", "timezone_info": "Times are in your local timezone" }, nl: { "Practice": "Training", "Qualification": "Kwalificatie", "Race": "Race", "Sprint Race": "Sprint Race", "Sprint Shootout": "Sprint Shootout", "First Practice": "Eerste Training", "Second Practice": "Tweede Training", "Third Practice": "Derde Training", "Last Practice": "Laatste Training", "First Qualification": "Eerste Kwalificatie", "Second Qualification": "Tweede Kwalificatie", "Third Qualification": "Derde Kwalificatie", "Sprint Shootout 1": "Sprint Kwalificatie 1", "Sprint Shootout 2": "Sprint Kwalificatie 2", "Sprint Shootout 3": "Sprint Kwalificatie 3", // UI labels "upcoming_race": "Komende race", "overview": "Overzicht", "timezone_info": "Tijden zijn in je lokale tijdzone" }, fr: { "Practice": "Essais", "Qualification": "Qualification", "Race": "Course", "Sprint Race": "Course Sprint", "Sprint Shootout": "Sprint Shootout", "First Practice": "Essais Libres 1", "Second Practice": "Essais Libres 2", "Third Practice": "Essais Libres 3", "Last Practice": "Derniers Essais Libres", "First Qualification": "Première Qualification", "Second Qualification": "Deuxième Qualification", "Third Qualification": "Troisième Qualification", "Sprint Shootout 1": "Qualifications Sprint 1", "Sprint Shootout 2": "Qualifications Sprint 2", "Sprint Shootout 3": "Qualifications Sprint 3", // UI labels "upcoming_race": "Prochaine course", "overview": "Aperçu", "timezone_info": "Les horaires sont dans votre fuseau horaire local" }, de: { "Practice": "Training", "Qualification": "Qualifikation", "Race": "Rennen", "Sprint Race": "Sprint-Rennen", "Sprint Shootout": "Sprint-Shootout", "First Practice": "Erstes Training", "Second Practice": "Zweites Training", "Third Practice": "Drittes Training", "Last Practice": "Letztes Training", "First Qualification": "Erste Qualifikation", "Second Qualification": "Zweite Qualifikation", "Third Qualification": "Dritte Qualifikation", "Sprint Shootout 1": "Sprint-Qualifikation 1", "Sprint Shootout 2": "Sprint-Qualifikation 2", "Sprint Shootout 3": "Sprint-Qualifikation 3", // UI labels "upcoming_race": "Nächstes Rennen", "overview": "Übersicht", "timezone_info": "Zeiten sind in Ihrer lokalen Zeitzone" }, es: { "Practice": "Práctica", "Qualification": "Clasificación", "Race": "Carrera", "Sprint Race": "Carrera Sprint", "Sprint Shootout": "Sprint Shootout", "First Practice": "Primera Práctica", "Second Practice": "Segunda Práctica", "Third Practice": "Tercera Práctica", "Last Practice": "Última Práctica", "First Qualification": "Primera Clasificación", "Second Qualification": "Segunda Clasificación", "Third Qualification": "Tercera Clasificación", "Sprint Shootout 1": "Clasificación Sprint 1", "Sprint Shootout 2": "Clasificación Sprint 2", "Sprint Shootout 3": "Clasificación Sprint 3", // UI labels "upcoming_race": "Próxima carrera", "overview": "Resumen", "timezone_info": "Los horarios están en tu zona horaria local" }, it: { "Practice": "Prove", "Qualification": "Qualifiche", "Race": "Gara", "Sprint Race": "Gara Sprint", "Sprint Shootout": "Sprint Shootout", "First Practice": "Prime Prove", "Second Practice": "Seconde Prove", "Third Practice": "Terze Prove", "Last Practice": "Ultime Prove", "First Qualification": "Prima Qualifica", "Second Qualification": "Seconda Qualifica", "Third Qualification": "Terza Qualifica", "Sprint Shootout 1": "Qualifiche Sprint 1", "Sprint Shootout 2": "Qualifiche Sprint 2", "Sprint Shootout 3": "Qualifiche Sprint 3", // UI labels "upcoming_race": "Prossima gara", "overview": "Panoramica", "timezone_info": "Gli orari sono nel tuo fuso orario locale" }, pt: { "Practice": "Treino", "Qualification": "Qualificação", "Race": "Corrida", "Sprint Race": "Corrida Sprint", "Sprint Shootout": "Sprint Shootout", "First Practice": "Primeiro Treino", "Second Practice": "Segundo Treino", "Third Practice": "Terceiro Treino", "Last Practice": "Último Treino", "First Qualification": "Primeira Qualificação", "Second Qualification": "Segunda Qualificação", "Third Qualification": "Terceira Qualificação", "Sprint Shootout 1": "Qualificação Sprint 1", "Sprint Shootout 2": "Qualificação Sprint 2", "Sprint Shootout 3": "Qualificação Sprint 3", // UI labels "upcoming_race": "Próxima corrida", "overview": "Visão geral", "timezone_info": "Os horários estão no seu fuso horário local" }, "pt-br": { "Practice": "Treino", "Qualification": "Qualificação", "Race": "Corrida", "Sprint Race": "Corrida Sprint", "Sprint Shootout": "Sprint Shootout", "First Practice": "Primeiro Treino", "Second Practice": "Segundo Treino", "Third Practice": "Terceiro Treino", "Last Practice": "Último Treino", "First Qualification": "Primeira Qualificação", "Second Qualification": "Segunda Qualificação", "Third Qualification": "Terceira Qualificação", "Sprint Shootout 1": "Classificação Sprint 1", "Sprint Shootout 2": "Classificação Sprint 2", "Sprint Shootout 3": "Classificação Sprint 3", // UI labels "upcoming_race": "Próxima corrida", "overview": "Visão geral", "timezone_info": "Os horários estão no seu fuso horário local" }, da: { "Practice": "Træning", "Qualification": "Kvalifikation", "Race": "Løb", "Sprint Race": "Sprintløb", "Sprint Shootout": "Sprint Shootout", "First Practice": "Første Træning", "Second Practice": "Anden Træning", "Third Practice": "Tredje Træning", "Last Practice": "Sidste Træning", "First Qualification": "Første Kvalifikation", "Second Qualification": "Anden Kvalifikation", "Third Qualification": "Tredje Kvalifikation", "Sprint Shootout 1": "Sprint Kvalifikation 1", "Sprint Shootout 2": "Sprint Kvalifikation 2", "Sprint Shootout 3": "Sprint Kvalifikation 3", // UI labels "upcoming_race": "Kommende løb", "overview": "Oversigt", "timezone_info": "Tiderne er i din lokale tidszone" }, lt: { "Practice": "Treniruotė", "Qualification": "Kvalifikacija", "Race": "Lenktynės", "Sprint Race": "Sprint Lenktynės", "Sprint Shootout": "Sprint Shootout", "First Practice": "Pirmoji Treniruotė", "Second Practice": "Antroji Treniruotė", "Third Practice": "Trečioji Treniruotė", "Last Practice": "Paskutinė Treniruotė", "First Qualification": "Pirmoji Kvalifikacija", "Second Qualification": "Antroji Kvalifikacija", "Third Qualification": "Trečioji Kvalifikacija", "Sprint Shootout 1": "Sprinto Kvalifikacija 1", "Sprint Shootout 2": "Sprinto Kvalifikacija 2", "Sprint Shootout 3": "Sprinto Kvalifikacija 3", // UI labels "upcoming_race": "Artėjančios lenktynės", "overview": "Apžvalga", "timezone_info": "Laikai yra jūsų vietinėje laiko juostoje" } }; // Helper function for translations function getGpBlogDatasetTranslatedModel(model) { const translations = { track: `${LANGUAGE}/grandsprix`, calendar: `${LANGUAGE}/f1-calendar`, }; return translations[model] || model; } // Fetch the latest season if no custom season is provided async function getLatestSeason() { try { const response = await fetch( `https://dataset-service.newsifier.nl/api/v1/gpblog/Season/items/index?orderBy%5Bname%5D=desc&take=1` ); if (!response.ok) { throw new Error("Failed to fetch latest season"); } const data = await response.json(); return data.data[0]?.slug || null; } catch (error) { console.error("Error fetching latest season:", error); return null; } } // Fetch stages for a season async function fetchStages(seasonSlug) { try { const response = await fetch( `https://dataset-service.newsifier.nl/api/v1/gpblog/Stage/items/index?orderBy%5Bdate_time%5D=asc&where%5Bseason%5D%5Bslug%5D=${seasonSlug}&include%5Btrack%5D%5Binclude%5D%5Bcountry%5D=true` ); if (!response.ok) { throw new Error("Failed to fetch stages"); } const data = await response.json(); return data.data || []; } catch (error) { console.error("Error fetching stages:", error); return []; } } // Process stages data function processStages(stages) { // Get unique track IDs const tracksIds = [...new Set(stages.map(stage => stage.track_id))]; // Group stages by track const tracks = stages.reduce((acc, stage) => { const trackId = stage.track_id; if (!acc[trackId]) { acc[trackId] = { ...stage.track, stages: [], }; } acc[trackId].stages.push(stage); return acc; }, {}); return { tracksIds, tracks }; } // Find the upcoming race track ID function findUpcomingRaceTrackId(stages) { const now = new Date(); // First, find the earliest stage that's in the future const upcomingStage = stages.find(stage => new Date(stage.date_time) >= now); // If we found an upcoming stage, return its track_id if (upcomingStage) { return upcomingStage.track_id; } // If all races are in the past, return the first track as fallback return stages.length > 0 ? stages[0].track_id : null; } // Format date for display function formatDate(dateString, options) { return new Date(dateString).toLocaleString(LANGUAGE_CODE, options); } // Group stages by day function groupStagesByDay(stages) { return stages.reduce((acc, stage) => { const dayName = new Date(stage.date_time).toLocaleDateString(LANGUAGE_CODE, { weekday: "long", }); if (!acc[dayName]) { acc[dayName] = []; } acc[dayName].push(stage); return acc; }, {}); } // Render the F1 calendar function renderF1Calendar(tracksIds, tracks, upcomingTrackId, tagData) { if (!tracksIds.length || !upcomingTrackId) { document.querySelectorAll(".f1-calendar-container").forEach(target => { target.innerHTML = '

No F1 calendar data available

'; }); return; } // Get the upcoming race track const track = tracks[upcomingTrackId]; const tag = tagData.find((tag) => tag.model_id === track.id); const slug = tag?.slug || track.slug; const name = tag?.title || track.name; const translatedTrack = getGpBlogDatasetTranslatedModel("track"); // Group stages by day for the upcoming race const stagesByDay = groupStagesByDay(track.stages || []); // Create HTML for desktop schedule let desktopScheduleHTML = ""; Object.entries(stagesByDay).forEach(([dayName, dayStages]) => { if (dayStages.length > 0) { let stagesHTML = ""; // Get the date from the first stage in this day const date = new Date(dayStages[0].date_time); const formattedDate = `${String(date.getDate()).padStart(2, "0")}.${String( date.getMonth() + 1 ).padStart(2, "0")}.${String(date.getFullYear()).slice(-2)}`; dayStages.forEach(stage => { const stageTime = new Date(stage.date_time).toLocaleString(LANGUAGE_CODE, { hour: "2-digit", minute: "2-digit", }); // Translate stage name using stagesLabels if available const stageName = stagesLabels[LANGUAGE]?.[stage.name] || stage.name; stagesHTML += `

${stageName}

${stageTime}

`; }); desktopScheduleHTML += `

${dayName} ${formattedDate}

${stagesHTML}

`; } }); // Create HTML for mobile schedule let mobileScheduleHTML = ""; // Group stages by date for mobile view const stagesByDate = {}; track.stages.forEach(stage => { const currentDate = new Date(stage.date_time); const dateKey = `${currentDate.getFullYear()}-${currentDate.getMonth()}-${currentDate.getDate()}`; if (!stagesByDate[dateKey]) { stagesByDate[dateKey] = []; } stagesByDate[dateKey].push(stage); }); // Find the next upcoming stage const now = new Date(); let upcomingEvent = null; let upcomingDateKey = null; if (DEBUG) console.log(`F1 Calendar: Finding upcoming event. Current time: ${now.toLocaleString()}`); // Find the next upcoming event and its date key for (const [dateKey, stages] of Object.entries(stagesByDate)) { const sortedStages = [...stages].sort((a, b) => new Date(a.date_time) - new Date(b.date_time)); for (const stage of sortedStages) { const stageTime = new Date(stage.date_time); if (DEBUG) console.log(`F1 Calendar: Checking stage '${stage.name}' at ${stageTime.toLocaleString()}`); if (stageTime >= now) { upcomingEvent = stage; upcomingDateKey = dateKey; if (DEBUG) console.log(`F1 Calendar: Found upcoming event: '${stage.name}' (id: ${stage.id}) at ${stageTime.toLocaleString()}`); break; } } if (upcomingEvent) break; } // If no upcoming event, use the last event if (!upcomingEvent && Object.keys(stagesByDate).length > 0) { const lastDateKey = Object.keys(stagesByDate).sort().pop(); const lastStages = stagesByDate[lastDateKey]; upcomingEvent = lastStages[lastStages.length - 1]; upcomingDateKey = lastDateKey; if (DEBUG) console.log(`F1 Calendar: No upcoming events found, using last event: '${upcomingEvent.name}' (id: ${upcomingEvent.id})`); } let upcomingStageIndex = -1; // Render groups of stages by date for mobile Object.entries(stagesByDate).forEach(([dateKey, stages], dateIndex) => { // Get the date from the first stage in this group const date = new Date(stages[0].date_time); const formattedDate = `${String(date.getDate()).padStart(2, "0")}.${String( date.getMonth() + 1 ).padStart(2, "0")}.${String(date.getFullYear()).slice(-2)}`; // Get the day name, same as used in desktop view const dayName = date.toLocaleDateString(LANGUAGE_CODE, { weekday: "long", }); const isUpcomingDateGroup = dateKey === upcomingDateKey; if (DEBUG && isUpcomingDateGroup) { console.log(`F1 Calendar: Marking date group as upcoming: ${dayName} ${formattedDate}`); } mobileScheduleHTML += `

${dayName} ${formattedDate}

`; // Add all stages for this date stages.forEach((stage, stageIndex) => { const stageDateTime = new Date(stage.date_time).toLocaleString(LANGUAGE_CODE, { weekday: "short", hour: "2-digit", minute: "2-digit", }); // Translate stage name using stagesLabels if available const stageName = stagesLabels[LANGUAGE]?.[stage.name] || stage.name; const isUpcomingStage = upcomingEvent && stage.id === upcomingEvent.id; if (isUpcomingStage) { upcomingStageIndex = stageIndex; if (DEBUG) console.log(`F1 Calendar: Marking stage as upcoming: '${stageName}' at index ${stageIndex}`); } mobileScheduleHTML += `

${stageName}

${stageDateTime}

`; }); // Close the date group container mobileScheduleHTML += `

`; }); // Create the main HTML const html = ` ${stagesLabels[LANGUAGE]?.upcoming_race || "Komende race"}

${desktopScheduleHTML}

${mobileScheduleHTML}

${stagesLabels[LANGUAGE]?.timezone_info || "Tijden zijn in je lokale tijdzone"}

`; document.querySelectorAll(".f1-calendar-container").forEach(target => { // Check if already initialized to prevent duplicate initialization if (target.classList.contains('f1-calendar-initialized')) { return; } target.classList.add('f1-calendar-initialized'); target.innerHTML = html; // Completely rewritten horizontal scrolling to upcoming event const initScrollToUpcoming = () => { if (DEBUG) console.log(`F1 Calendar: Initializing scroll to upcoming event`); // Use requestAnimationFrame to ensure DOM is fully rendered const performScroll = () => { if (DEBUG) console.log(`F1 Calendar: Performing scroll operation`); // Find the upcoming event element const upcomingStage = target.querySelector('[data-upcoming-stage="true"]'); if (DEBUG) { console.log(`F1 Calendar: Upcoming stage found: ${!!upcomingStage}`); // Debug all events const allEvents = target.querySelectorAll('.mobile-event'); console.log(`F1 Calendar: Total mobile events: ${allEvents.length}`); allEvents.forEach((event, index) => { const hasUpcoming = event.hasAttribute('data-upcoming-stage'); console.log(`F1 Calendar: Event ${index} has upcoming attribute: ${hasUpcoming}`); }); } if (!upcomingStage) { if (DEBUG) console.log(`F1 Calendar: No upcoming stage found, cannot scroll`); return false; } // Find the scrollable container that contains this event let scrollContainer = upcomingStage.closest('.mobile-stages-container'); if (DEBUG) { console.log(`F1 Calendar: Scroll container found: ${!!scrollContainer}`); // Debug the container hierarchy if (scrollContainer) { console.log(`F1 Calendar: Container class list:`, scrollContainer.classList.toString()); console.log(`F1 Calendar: Container computed style overflow-x:`, getComputedStyle(scrollContainer).overflowX); console.log(`F1 Calendar: Container computed style white-space:`, getComputedStyle(scrollContainer).whiteSpace); // Check all children to see the layout const children = scrollContainer.children; console.log(`F1 Calendar: Container has ${children.length} direct children`); let totalChildrenWidth = 0; for (let i = 0; i < children.length; i++) { const child = children[i]; const childWidth = child.offsetWidth; totalChildrenWidth += childWidth; console.log(`F1 Calendar: Child ${i} width: ${childWidth}px, class: ${child.className}`); } console.log(`F1 Calendar: Total children width: ${totalChildrenWidth}px`); } } if (!scrollContainer) { if (DEBUG) console.log(`F1 Calendar: No scroll container found`); return false; } // Check if this container actually has horizontal scrolling const hasHorizontalScroll = scrollContainer.scrollWidth > scrollContainer.clientWidth; if (!hasHorizontalScroll) { if (DEBUG) console.log(`F1 Calendar: Current container doesn't have horizontal scroll, searching for alternative...`); // Look for a parent container that has horizontal scrolling let parent = upcomingStage.parentElement; let foundScrollableParent = null; while (parent && !foundScrollableParent) { if (parent.scrollWidth > parent.clientWidth) { foundScrollableParent = parent; if (DEBUG) console.log(`F1 Calendar: Found scrollable parent:`, parent.className); break; } parent = parent.parentElement; } if (foundScrollableParent) { scrollContainer = foundScrollableParent; } else { if (DEBUG) console.log(`F1 Calendar: No scrollable container found in hierarchy`); return false; } } // Get current scroll position and container dimensions const containerWidth = scrollContainer.clientWidth; const containerScrollWidth = scrollContainer.scrollWidth; // Get the position of the upcoming event relative to its container const eventRect = upcomingStage.getBoundingClientRect(); const containerRect = scrollContainer.getBoundingClientRect(); const eventOffsetInContainer = upcomingStage.offsetLeft; const eventWidth = upcomingStage.offsetWidth; if (DEBUG) { console.log(`F1 Calendar: Container width: ${containerWidth}px`); console.log(`F1 Calendar: Container scroll width: ${containerScrollWidth}px`); console.log(`F1 Calendar: Event offset in container: ${eventOffsetInContainer}px`); console.log(`F1 Calendar: Event width: ${eventWidth}px`); console.log(`F1 Calendar: Event rect:`, eventRect); console.log(`F1 Calendar: Container rect:`, containerRect); } // Calculate the scroll position to center the event const targetScrollLeft = eventOffsetInContainer - (containerWidth / 2) + (eventWidth / 2); // Ensure scroll position is within bounds const maxScrollLeft = containerScrollWidth - containerWidth; const finalScrollLeft = Math.max(0, Math.min(targetScrollLeft, maxScrollLeft)); if (DEBUG) { console.log(`F1 Calendar: Target scroll left: ${targetScrollLeft}px`); console.log(`F1 Calendar: Max scroll left: ${maxScrollLeft}px`); console.log(`F1 Calendar: Final scroll left: ${finalScrollLeft}px`); console.log(`F1 Calendar: Current scroll left: ${scrollContainer.scrollLeft}px`); } // Apply the scroll try { // Try smooth scrolling first scrollContainer.scrollTo({ left: finalScrollLeft, behavior: 'smooth' }); // Fallback for immediate scrolling setTimeout(() => { if (Math.abs(scrollContainer.scrollLeft - finalScrollLeft) > 5) { scrollContainer.scrollLeft = finalScrollLeft; if (DEBUG) console.log(`F1 Calendar: Applied fallback scroll: ${scrollContainer.scrollLeft}px`); } }, 1000); if (DEBUG) { setTimeout(() => { console.log(`F1 Calendar: Final scroll position after 300ms: ${scrollContainer.scrollLeft}px`); }, 3000); } return true; } catch (error) { if (DEBUG) console.error(`F1 Calendar: Error during scroll:`, error); return false; } }; // Try scrolling with multiple timing strategies let attempts = 0; const maxAttempts = 5; const tryScroll = () => { attempts++; if (DEBUG) console.log(`F1 Calendar: Scroll attempt ${attempts}/${maxAttempts}`); const success = performScroll(); if (!success && attempts < maxAttempts) { // Retry with exponential backoff const delay = Math.min(100 * Math.pow(2, attempts - 1), 1000); if (DEBUG) console.log(`F1 Calendar: Retrying in ${delay}ms`); setTimeout(tryScroll, delay); } }; // Start with requestAnimationFrame for better timing requestAnimationFrame(() => { requestAnimationFrame(() => { tryScroll(); }); }); }; // Initialize scrolling initScrollToUpcoming(); }); } // Main function to initialize the calendar async function initF1Calendar() { // Check if there are any uninitialized calendar containers const containers = document.querySelectorAll(".f1-calendar-container:not(.f1-calendar-initialized)"); if (!containers.length) { return; } try { // Get season slug let seasonSlug = customSeasonSlug; if (!seasonSlug) { seasonSlug = await getLatestSeason(); } if (!seasonSlug) { throw new Error("No season found"); } // Fetch stages for the season const stages = await fetchStages(seasonSlug); if (!stages.length) { throw new Error("No stages found for this season"); } // Find the upcoming race track ID const upcomingTrackId = findUpcomingRaceTrackId(stages); // Process the stages data const { tracksIds, tracks } = processStages(stages); const tagData = await getCollectionItemsTags( dataset, "grandsprix", [upcomingTrackId] ); // Render the calendar renderF1Calendar(tracksIds, tracks, upcomingTrackId, tagData); } catch (error) { console.error("Error initializing F1 calendar:", error); document.querySelectorAll(".f1-calendar-container:not(.f1-calendar-initialized)").forEach(container => { container.classList.add('f1-calendar-initialized'); container.innerHTML = `

Error loading F1 calendar: ${error.message}

`; }); } } const getCollectionItemsTags = async (dataset, collection, ids) => { try { const res = await fetch(`https://cloud1-service.newsifier.nl/api/v2/tag/dataset/${dataset}/${collection}?ids=${ids.join(',')}`, { headers: { "Content-Type": "application/json", "x-tenant": `gpblog.com-${LANGUAGE}`, "accept-language": LANGUAGE, }, }); const data = await res.json(); return data.data; } catch (err) { return []; } }; initF1Calendar()

Pos.	Driver	Team	Points
1	Kimi Antonelli Kimi Antonelli	MercedesMER	131
2	George Russell George Russell	MercedesMER	88
3	Charles Leclerc Charles Leclerc	FerrariFER	75
4	Lewis Hamilton Lewis Hamilton	FerrariFER	72
5	Lando Norris Lando Norris	McLarenMCL	58
6	Oscar Piastri Oscar Piastri	McLarenMCL	48
7	Max Verstappen Max Verstappen	Red Bull RacingRBR	43
8	Pierre Gasly Pierre Gasly	AlpineALP	20
9	Oliver Bearman Oliver Bearman	HaasHAA	18
10	Liam Lawson Liam Lawson	Racing BullsRCB	16
11	Franco Colapinto Franco Colapinto	AlpineALP	15
12	Isack Hadjar Isack Hadjar	Red Bull RacingRBR	14
13	Carlos Sainz Carlos Sainz	WilliamsWIL	6
14	Arvid Lindblad Arvid Lindblad	Racing BullsRCB	5
15	Gabriel Bortoleto Gabriel Bortoleto	AudiAUD	2
16	Esteban Ocon Esteban Ocon	HaasHAA	1
17	Alexander Albon Alexander Albon	WilliamsWIL	1
18	Nico Hulkenberg Nico Hulkenberg	AudiAUD	0
19	Valtteri Bottas Valtteri Bottas	CadillacCAD	0
20	Sergio Perez Sergio Perez	CadillacCAD	0
21	Lance Stroll Lance Stroll	Aston MartinAST	0
22	Fernando Alonso Fernando Alonso	Aston MartinAST	0

Watch | Verstappen overtakes Hamilton at turn one in Spain

Verstappen in the lead

Don’t miss GPblog in Google

F1 LIVE | Hamilton v Verstappen for the 2021 Spanish Grand Prix

Comedy pitstop for Alfa Romeo: One of Giovinazzi's tyres punctured

Inside Max Verstappen’s $15 million yacht: How the F1 star relaxes away from the track

Mercedes and Aston Martin fined for Monaco GP FP2 incidents

Russell surprised by Verstappen's Monaco pace: 'More challenging than we thought'

F1 Full Results | Hamilton leads Ferrari one-two in dominant Monaco GP FP2

Hamilton continues fine form as Ferrari leads Verstappen in Monaco

New Mercedes engine failure hurts Norris as McLaren car stops in Monaco

Home favourite Leclerc handed warning after FP1 incident in Monaco

Frustrated Briatore opens door for Wolff and Horner to help breathe new life into struggling Alpine

Inside Max Verstappen’s $15 million yacht: How the F1 star relaxes away from the track

Mercedes and Aston Martin fined for Monaco GP FP2 incidents

Russell surprised by Verstappen's Monaco pace: 'More challenging than we thought'

F1 Full Results | Hamilton leads Ferrari one-two in dominant Monaco GP FP2

Popular on GPBlog

Marko predicts Monaco GP winner with confident verdict: 'He's my favourite'

F1 Today | Hamilton steals the spotlight, Norris and Leclerc already face FIA stewards

F1 LIVE: Leclerc goes quickest at FP1 of Monaco GP - follow reactions here!

Piastri denied access to F1 Monaco paddock by security

Season

F1 LIVE | Hamilton v Verstappen for the 2021 Spanish Grand Prix

Comedy pitstop for Alfa Romeo: One of Giovinazzi's tyres punctured