james-yeahright0311/patchnotes-pulse-live

1// Mock data - in a real app, you would fetch this from an API2const mockPatchNotes = [3    {4        id: 1,5        title: "Version 2.5.0 - New Features",6        date: "2023-11-15",7        game: "Valorant",8        content: "Added new agent, updated competitive ranking system, and fixed several bugs.",9        isNew: true10    },11    {12        id: 2,13        title: "Hotfix 2.4.3",14        date: "2023-11-10",15        game: "League of Legends",16        content: "Fixed client crash issues and adjusted champion balance.",17        isNew: false18    },19    {20        id: 3,21        title: "Season 8 Update",22        date: "2023-11-05",23        game: "Fortnite",24        content: "New battle pass, map changes, and weapon adjustments.",25        isNew: false26    },27    {28        id: 4,29        title: "Overwatch 2 - Season 7",30        date: "2023-11-12",31        game: "Overwatch 2",32        content: "New hero, Halloween Terror event, and map pool updates.",33        isNew: true34    },35    {36        id: 5,37        title: "Cyberpunk 2077 - Patch 2.01",38        date: "2023-11-08",39        game: "Cyberpunk 2077",40        content: "Performance improvements and bug fixes for Phantom Liberty expansion.",41        isNew: false42    },43    {44        id: 6,45        title: "Apex Legends - Ascension Update",46        date: "2023-11-03",47        game: "Apex Legends",48        content: "New legend, weapon adjustments, and ranked season changes.",49        isNew: false50    },51    {52        id: 7,53        title: "Dota 2 - 7.34d",54        date: "2023-10-30",55        game: "Dota 2",56        content: "Hero balance changes and The International battle pass updates.",57        isNew: false58    },59    {60        id: 8,61        title: "Counter-Strike 2 - November Update",62        date: "2023-11-14",63        game: "CS2",64        content: "New maps, anti-cheat improvements, and UI updates.",65        isNew: true66    }67];68document.addEventListener('DOMContentLoaded', () => {69    const container = document.getElementById('patch-notes-container');70    71    // Simulate API loading delay72    setTimeout(() => {73        renderPatchNotes(mockPatchNotes);74    }, 1000);75});76 77function renderPatchNotes(notes) {78    const container = document.getElementById('patch-notes-container');79    container.innerHTML = '';80    81    notes.forEach(note => {82        const noteElement = document.createElement('div');83        noteElement.className = 'patch-note-card bg-white rounded-lg shadow-md overflow-hidden';84        noteElement.innerHTML = `85            <div class="p-6">86                <div class="flex justify-between items-start">87                    <div>88                        <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold ${89                            note.game === 'Valorant' ? 'bg-red-100 text-red-800' : 90                            note.game === 'League of Legends' ? 'bg-blue-100 text-blue-800' : 91                            note.game === 'Fortnite' ? 'bg-purple-100 text-purple-800' :92                            note.game === 'Overwatch 2' ? 'bg-orange-100 text-orange-800' :93                            note.game === 'Cyberpunk 2077' ? 'bg-yellow-100 text-yellow-800' :94                            note.game === 'Apex Legends' ? 'bg-rose-100 text-rose-800' :95                            note.game === 'Dota 2' ? 'bg-emerald-100 text-emerald-800' :96                            'bg-indigo-100 text-indigo-800'}">97${note.game}98                        </span>99                        ${note.isNew ? `<span class="badge-new ml-2 inline-block px-2 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800">NEW</span>` : ''}100                    </div>101                    <span class="text-sm text-gray-500">${note.date}</span>102                </div>103                <h2 class="mt-2 text-xl font-bold text-gray-800">${note.title}</h2>104                <p class="mt-3 text-gray-600">${note.content}</p>105                <div class="mt-4 flex items-center">106                    <i data-feather="clock" class="w-4 h-4 text-gray-400"></i>107                    <span class="ml-2 text-sm text-gray-500">Updated just now</span>108                </div>109            </div>110        `;111        container.appendChild(noteElement);112    });113    114    feather.replace();115}116 117// In a real app, you would set up WebSocket or polling for live updates118setInterval(() => {119    // This would be replaced with actual API calls120    console.log("Checking for updates...");121}, 30000);