<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OKEYSİN Tournament</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
<div id="particles-js"></div>
<div class="cyber-container">
<h1 class="cyber-title">🏆 OKEYSİN TOURNAMENT 🏆</h1>
<div class="tournament-mode-selector">
<label class="mode-label">
<input type="radio" name="tournamentMode" value="single" checked>
<span><i class="fas fa-user"></i> Tek Katılımcı Modu</span>
</label>
<label class="mode-label">
<input type="radio" name="tournamentMode" value="double">
<span><i class="fas fa-users"></i> Çift Katılımcı Modu</span>
</label>
</div>
<div class="top-menu">
<a href="#" class="cyber-button new-tournament-btn" onclick="resetTournament()">
<i class="fas fa-plus"></i> Yeni Turnuva
</a>
<a href="#" class="cyber-button copy-btn" onclick="copyTournamentData()">
<i class="fas fa-copy"></i> Eşleşmeleri Kopyala
</a>
<a href="#" class="cyber-button next-round-btn" onclick="advanceRound()">
<i class="fas fa-forward"></i> Sonraki Tur
</a>
<a href="#" class="cyber-button history-btn" onclick="toggleHistory()">
<i class="fas fa-history"></i> Geçmiş
</a>
<a href="#" class="cyber-button export-btn" onclick="exportTournamentData()">
<i class="fas fa-download"></i> Dışa Aktar
</a>
</div>
<div class="tournament-panels">
<div class="panel single-tournament-panel" id="singleTournamentPanel">
<div class="input-area-wrapper">
<div class="input-participant-area cyber-card">
<h3><i class="fas fa-user"></i> Tek Katılımcı Turnuvası</h3>
<input type="text" id="adminName" class="nes-input" placeholder="Admin Adı (isteğe bağlı)">
<div class="search-wrapper">
<input type="text" id="singlePlayerInput" class="nes-input" placeholder="Katılımcı Adı">
<input type="text" id="participantSearch" class="nes-input" placeholder="Ara...">
</div>
<a href="#" class="cyber-button" onclick="addSingleParticipant()">
<i class="fas fa-user-plus"></i> Ekle
</a>
</div>
</div>
</div>
<div class="panel double-tournament-panel" id="doubleTournamentPanel" style="display: none;">
<div class="input-area-wrapper">
<div class="input-participant-area cyber-card">
<h3><i class="fas fa-users"></i> Çift Katılımcı Turnuvası</h3>
<input type="text" id="doubleAdminName" class="nes-input" placeholder="Admin Adı (isteğe bağlı)">
<div class="search-wrapper">
<input type="text" id="playerInput" class="nes-input" placeholder="Katılımcı Ekle (2 isim)">
<input type="text" id="doubleParticipantSearch" class="nes-input" placeholder="Ara...">
</div>
<a href="#" class="cyber-button" onclick="addDoubleParticipant()">
<i class="fas fa-users"></i> Ekle
</a>
</div>
</div>
</div>
<div class="participant-list-area cyber-card bordered-area">
<h4 onclick="toggleParticipantList()" style="cursor: pointer;">
<i class="fas fa-users"></i> Katılımcı Listesi (<span id="participantCount">0</span>)
</h4>
<div id="participantList" class="participant-list" style="display: none;"></div>
</div>
<div class="tournament-stats cyber-card">
<h3><i class="fas fa-chart-bar"></i> Turnuva İstatistikleri</h3>
<div class="stats-grid">
<div class="stat-item">
<span class="stat-label">Toplam Turnuva</span>
<span id="totalTournaments">0</span>
</div>
<div class="stat-item">
<span class="stat-label">Aktif Tur</span>
<span id="currentRoundStat">0</span>
</div>
<div class="stat-item">
<span class="stat-label">Katılımcı Sayısı</span>
<span id="totalParticipants">0</span>
</div>
</div>
<canvas id="statsChart"></canvas>
</div>
<div class="tournament-controls">
<button id="startTournamentBtn" class="cyber-button next-round-btn" onclick="startTournament()">
<i class="fas fa-play"></i> Turnuvayı Başlat
</button>
</div>
</div>
<div id="matchesContainer" class="matches-container">
<div id="tournamentContainer" class="tournament-matches"></div>
</div>
<div class="right-side-wrapper">
<div class="special-message-area cyber-card">
<h3><i class="fas fa-comment"></i> Özel Mesaj</h3>
<textarea id="specialMessage" class="nes-textarea" placeholder="Özel mesajınızı buraya girin (isteğe bağlı)"></textarea>
</div>
<div class="notification-area cyber-card">
<h3><i class="fas fa-bell"></i> Bildirimler</h3>
<div class="notification-filters">
<button class="filter-btn active" data-filter="all">Tümü</button>
<button class="filter-btn" data-filter="system">Sistem</button>
<button class="filter-btn" data-filter="match">Maç</button>
</div>
<div id="notificationList" class="notification-list"></div>
</div>
</div>
<div id="tournamentResultsArea" class="cyber-card bordered-area" style="display: none;">
<h3>🏆 Turnuva Sonuçları 🏆</h3>
<p><b><i class="fas fa-trophy"></i> Şampiyon:</b> <span id="tournamentChampion"></span></p>
<p><b><i class="fas fa-info-circle"></i> Turnuva Durumu:</b> <span id="tournamentStatus"></span></p>
<p><b><i class="fas fa-clock"></i> Başlangıç Zamanı:</b> <span id="tournamentDateTime"></span></p>
<p><b><i class="fas fa-flag-checkered"></i> Bitiş Zamanı:</b> <span id="tournamentEndTime"></span></p>
<p><b><i class="fas fa-user"></i> Admin Adı:</b> <span id="tournamentAdmin"></span></p>
</div>
<div id="tournamentHistory" class="cyber-card bordered-area" style="display: none;">
<h3><i class="fas fa-history"></i> Turnuva Geçmişi</h3>
<div id="historyList" class="history-list"></div>
</div>
</div>
<script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>/* Ana Tema Renkleri */
:root {
--primary-color: #00bfff;
--secondary-color: #004d99;
--text-color: #ffffff;
--border-color: #0066cc;
--neon-glow: 0 0 10px rgba(0, 191, 255, 0.5),
0 0 20px rgba(0, 191, 255, 0.3),
0 0 30px rgba(0, 191, 255, 0.1);
}
/* Genel Ayarlar */
body {
background: linear-gradient(45deg, #000000, #001a33);
color: var(--text-color);
font-family: 'Courier New', monospace;
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* Partiküller için Arka Plan */
#particles-js {
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
}
/* Ana Konteyner */
.cyber-container {
width: 95%;
max-width: 1200px;
margin: 20px auto;
padding: 20px;
border-radius: 15px;
box-shadow: var(--neon-glow);
background: rgba(0, 10, 20, 0.95);
backdrop-filter: blur(10px);
border: 2px solid var(--border-color);
display: flex;
flex-direction: column;
gap: 20px;
}
/* Başlık */
.cyber-title {
color: var(--primary-color);
text-shadow: var(--neon-glow);
animation: neon-pulse 2s ease-in-out infinite alternate;
font-size: 2.5em;
text-align: center;
margin: 0;
padding: 20px;
border: 2px solid var(--border-color);
border-radius: 10px;
background: rgba(0, 20, 40, 0.8);
}
/* Turnuva Panel Stilleri */
.tournament-panels {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.panel {
background: rgba(0, 20, 40, 0.8);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 15px;
transition: all 0.3s ease;
}
.panel:hover {
box-shadow: var(--neon-glow);
}
/* Eşleşme Alanı */
.matches-container {
margin: 20px 0;
padding: 15px;
border: 2px solid var(--border-color);
border-radius: 10px;
background: rgba(0, 20, 40, 0.8);
}
.match-card {
background: rgba(0, 15, 30, 0.9);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 15px;
margin: 10px auto;
max-width: 500px;
display: grid;
grid-template-columns: 2fr 1fr 2fr;
gap: 10px;
align-items: center;
transition: all 0.3s ease;
box-shadow: 0 0 20px rgba(0, 77, 153, 0.2);
}
.match-card:hover {
transform: translateY(-2px);
box-shadow: var(--neon-glow);
border-color: var(--primary-color);
}
.player-vs {
background: rgba(0, 25, 50, 0.8);
padding: 8px;
border-radius: 5px;
text-align: center;
border: 1px solid var(--border-color);
transition: all 0.3s ease;
}
.vs-text-area {
text-align: center;
font-size: 0.9em;
color: var(--text-color);
}
.match-controls {
grid-column: 1 / -1;
text-align: center;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.winner-select {
background: rgba(0, 25, 50, 0.8);
border: 1px solid var(--border-color);
color: var(--text-color);
padding: 8px;
border-radius: 5px;
width: 100%;
max-width: 300px;
cursor: pointer;
transition: all 0.3s ease;
flex: 1;
}
.winner-select:hover {
border-color: var(--primary-color);
box-shadow: 0 0 10px rgba(0, 191, 255, 0.2);
}
/* Tur Konteyneri */
.round-container {
margin-bottom: 30px;
padding: 15px;
border: 1px solid var(--border-color);
border-radius: 10px;
background: rgba(0, 20, 40, 0.8);
}
.round-container h2 {
text-align: center;
color: var(--primary-color);
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-color);
}
/* Butonlar */
.cyber-button {
background: rgba(0, 25, 50, 0.8);
color: var(--primary-color);
border: 2px solid var(--primary-color);
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
text-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 8px;
}
.cyber-button:hover {
background: rgba(0, 35, 70, 0.9);
box-shadow: var(--neon-glow);
transform: translateY(-2px);
}
.cyber-button::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border-radius: 8px;
background: linear-gradient(45deg, var(--primary-color), transparent);
z-index: -1;
animation: border-flow 3s linear infinite;
}
.cyber-button i {
margin-right: 5px;
}
/* Katılımcı Listesi */
.participant-list {
max-height: 300px;
overflow-y: auto;
padding: 10px;
}
.participant-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px;
margin: 5px 0;
background: rgba(0, 25, 50, 0.8);
border: 1px solid var(--border-color);
border-radius: 5px;
transition: all 0.3s ease;
}
.participant-item:hover {
background: rgba(0, 35, 70, 0.9);
border-color: var(--primary-color);
}
/* Form Elementleri */
.nes-input,
.nes-textarea {
border: 2px solid var(--border-color);
color: var(--text-color);
background: rgba(0, 10, 20, 0.95);
padding: 10px;
border-radius: 8px;
font-family: 'Courier New', monospace;
margin-bottom: 10px;
transition: all 0.3s ease;
}
.nes-input:focus,
.nes-textarea:focus {
border-color: var(--primary-color);
box-shadow: 0 0 15px rgba(0, 77, 153, 0.5);
outline: none;
}
/* Responsive */
@media (max-width: 768px) {
.cyber-container {
padding: 10px;
margin: 10px;
}
.match-card {
grid-template-columns: 1fr;
text-align: center;
}
.vs-text-area {
margin: 10px 0;
}
}
/* Animasyonlar */
@keyframes neon-pulse {
from {
text-shadow: 0 0 10px var(--primary-color),
0 0 20px var(--primary-color),
0 0 30px var(--primary-color);
}
to {
text-shadow: 0 0 15px var(--primary-color),
0 0 25px var(--primary-color),
0 0 35px var(--primary-color);
}
}
@keyframes border-flow {
0% {
background-position: 0% 0%;
}
100% {
background-position: 200% 0%;
}
}
/* Mod Seçici */
.tournament-mode-selector {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
padding: 15px;
border: 1px solid var(--border-color);
border-radius: 10px;
background: rgba(0, 30, 60, 0.5);
}
.mode-label {
color: var(--primary-color);
cursor: pointer;
padding: 10px 20px;
border: 2px solid var(--primary-color);
border-radius: 8px;
transition: all 0.3s ease;
display: flex;
align-items: center;
background: rgba(0, 0, 0, 0.8);
}
.mode-label:hover {
background: rgba(0, 191, 255, 0.1);
box-shadow: var(--neon-glow);
transform: translateY(-2px);
}
.mode-label input[type="radio"] {
margin-right: 8px;
}
.mode-label input[type="radio"]:checked + span {
color: #000;
background: var(--primary-color);
padding: 2px 8px;
border-radius: 4px;
}
/* Tournament Stats Styles */
.tournament-stats {
margin-top: 20px;
border: 2px solid var(--border-color);
border-radius: 10px;
padding: 15px;
background: rgba(0, 20, 40, 0.8);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
padding: 10px;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: rgba(0, 30, 60, 0.5);
transition: all 0.3s ease;
}
.stat-item:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 77, 153, 0.3);
}
.stat-label {
font-size: 0.9em;
color: var(--primary-color);
margin-bottom: 5px;
}
/* Notification Filters */
.notification-filters {
display: flex;
gap: 10px;
margin-bottom: 10px;
padding: 10px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: rgba(0, 20, 40, 0.8);
}
.filter-btn {
background: transparent;
border: 1px solid var(--border-color);
color: var(--primary-color);
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
.filter-btn:hover {
background: rgba(0, 77, 153, 0.3);
border-color: var(--primary-color);
}
.filter-btn.active {
background: var(--border-color);
color: var(--primary-color);
border-color: var(--primary-color);
}
/* Tournament History */
.history-list {
max-height: 300px;
overflow-y: auto;
padding: 10px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: rgba(0, 20, 40, 0.8);
}
.history-item {
border-bottom: 1px solid var(--border-color);
padding: 10px;
margin-bottom: 10px;
transition: all 0.3s ease;
}
.history-item:hover {
background: rgba(0, 30, 60, 0.5);
}
.history-item:last-child {
border-bottom: none;
}
.history-item h4 {
color: var(--primary-color);
margin: 0 0 5px 0;
text-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
}
.history-item p {
margin: 5px 0;
font-size: 0.9em;
color: rgba(0, 191, 255, 0.8);
}
/* Responsive enhancements */
@media (max-width: 768px) {
.tournament-mode-selector {
flex-direction: column;
align-items: center;
}
.stats-grid {
grid-template-columns: 1fr;
}
.notification-filters {
flex-wrap: wrap;
justify-content: center;
}
.search-wrapper {
flex-direction: column;
}
.match-card {
margin: 10px;
}
}
/* Popup Mesajları */
.toast-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
}
.toast {
background: rgba(0, 10, 20, 0.95);
color: var(--primary-color);
border: 1px solid var(--primary-color);
border-radius: 8px;
padding: 15px 25px;
margin-bottom: 10px;
box-shadow: var(--neon-glow);
animation: slide-in 0.3s ease-out;
display: flex;
align-items: center;
gap: 10px;
}
@keyframes slide-in {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* Arama alanı stilleri */
.search-wrapper {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.search-wrapper .nes-input {
flex: 1;
}
/* İstatistik grafiği stilleri */
#statsChart {
margin-top: 20px;
background: rgba(0, 10, 20, 0.8);
border-radius: 8px;
padding: 10px;
border: 1px solid var(--border-color);
}
/* Bildirim alanı güncellemeleri */
.notification-item {
padding: 8px;
margin: 5px 0;
border-radius: 5px;
background: rgba(0, 20, 40, 0.8);
border: 1px solid var(--border-color);
transition: all 0.3s ease;
}
.notification-item:hover {
background: rgba(0, 30, 60, 0.9);
border-color: var(--primary-color);
}
/* Buton güncellemeleri */
.participant-delete-btn {
background: rgba(255, 0, 0, 0.2);
border: 1px solid #ff0000;
color: #ff0000;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
.participant-delete-btn:hover {
background: rgba(255, 0, 0, 0.4);
box-shadow: 0 0 10px rgba(255, 0, 0, 0.4);
}
/* Kopyalama butonu stili */
.copy-match-btn {
margin-left: 10px;
padding: 8px 15px;
font-size: 0.9em;
background: rgba(0, 25, 50, 0.8);
}
// Tek katılımcı modu değişkenleri
let singleParticipants = [];
let singleTournamentData = [];
let singleCurrentRound = 0;
let singleTotalRounds = 0;
let singleTournamentStartTime;
let singleTournamentEndTime;
let singleAdminName = "";
// Çift katılımcı modu değişkenleri
let doubleParticipants = [];
let doubleTournamentData = [];
let doubleCurrentRound = 0;
let doubleTotalRounds = 0;
let doubleTournamentStartTime;
let doubleTournamentEndTime;
let doubleAdminName = "";
// Ortak değişkenler
let tournamentMode = "single";
let notifications = [];
let singleTournamentHistory = [];
let doubleTournamentHistory = [];
// Sayfa yüklendiğinde
$(document).ready(function() {
// Mod seçimi değiştiğinde
$('input[name="tournamentMode"]').change(function() {
tournamentMode = $(this).val();
toggleTournamentPanels();
resetTournament(); // Mod değiştiğinde sıfırla
});
// Enter tuşu ile katılımcı ekleme
$('#singlePlayerInput').on('keypress', function(e) {
if (e.which === 13) addSingleParticipant();
});
$('#playerInput').on('keypress', function(e) {
if (e.which === 13) addDoubleParticipant();
});
// Arama inputları
$('#participantSearch').on('input', function() {
searchParticipants($(this).val(), 'single');
});
$('#doubleParticipantSearch').on('input', function() {
searchParticipants($(this).val(), 'double');
});
// Bildirim filtresi
$('.filter-btn').click(function() {
$('.filter-btn').removeClass('active');
$(this).addClass('active');
filterNotifications($(this).data('filter'));
});
// Başlangıç yüklemeleri
loadTournamentHistory();
updateStats();
initializeParticles();
// Katılımcı listesini göster
toggleParticipantList();
});
// Panel değiştirme
function toggleTournamentPanels() {
if (tournamentMode === "single") {
$('#singleTournamentPanel').show();
$('#doubleTournamentPanel').hide();
renderParticipantList('single');
} else {
$('#singleTournamentPanel').hide();
$('#doubleTournamentPanel').show();
renderParticipantList('double');
}
updateStats();
}
// Katılımcı listesini göster/gizle
function toggleParticipantList() {
$('#participantList').slideToggle();
}
// Tek katılımcı ekleme
function addSingleParticipant() {
const inputVal = $('#singlePlayerInput').val().trim();
if (!inputVal) return;
if (singleParticipants.includes(inputVal)) {
showToast('⚠️ Bu katılımcı zaten eklendi!', 'warning');
return;
}
singleParticipants.push(inputVal);
$('#singlePlayerInput').val('');
renderParticipantList('single');
updateStats();
showToast('✅ Katılımcı eklendi', 'success');
}
// Çift katılımcı ekleme
function addDoubleParticipant() {
const inputVal = $('#playerInput').val().trim();
if (!inputVal) return;
const teamNames = inputVal.split(' ').filter(name => name.trim() !== '');
if (teamNames.length !== 2) {
showToast('⚠️ Lütfen 2 katılımcı ismi (boşlukla ayrılmış) girin!', 'warning');
return;
}
const teamName = `${teamNames[0]} & ${teamNames[1]}`;
if (doubleParticipants.includes(teamName)) {
showToast('⚠️ Bu takım zaten eklendi!', 'warning');
return;
}
doubleParticipants.push(teamName);
$('#playerInput').val('');
renderParticipantList('double');
updateStats();
showToast('✅ Takım eklendi', 'success');
}
// Katılımcı listesini güncelle
function renderParticipantList(mode, filteredList = null) {
const participants = mode === 'single' ? singleParticipants : doubleParticipants;
const listToRender = filteredList || participants;
$('#participantCount').text(listToRender.length);
$('#participantList').html(listToRender.map((name, index) => `
<div class="participant-item">
<span>
<i class="fas fa-${mode === 'single' ? 'user' : 'users'}"></i>
${name}
</span>
<button class="participant-delete-btn" onclick="deleteParticipant(${index}, '${mode}')">
<i class="fas fa-trash"></i> Sil
</button>
</div>
`).join(''));
}
// Katılımcı silme
function deleteParticipant(index, mode) {
const participants = mode === 'single' ? singleParticipants : doubleParticipants;
const deletedParticipant = participants.splice(index, 1)[0];
renderParticipantList(mode);
updateStats();
showToast(`🗑️ ${deletedParticipant} silindi`, 'info');
}
// Turnuvayı başlat
function startTournament() {
const mode = tournamentMode;
const participants = mode === 'single' ? singleParticipants : doubleParticipants;
const minParticipants = mode === 'single' ? 2 : 4;
if (participants.length < minParticipants) {
showToast(`❌ En az ${minParticipants} katılımcı gereklidir!`, 'error');
return;
}
if (mode === 'single') {
singleCurrentRound = 1;
singleTournamentData = [];
singleTotalRounds = Math.ceil(Math.log2(participants.length));
singleTournamentStartTime = new Date();
singleAdminName = $('#adminName').val().trim();
generateRound(shuffleArray([participants]), 'single');
} else {
doubleCurrentRound = 1;
doubleTournamentData = [];
doubleTotalRounds = Math.ceil(Math.log2(participants.length));
doubleTournamentStartTime = new Date();
doubleAdminName = $('#doubleAdminName').val().trim();
generateRound(shuffleArray([participants]), 'double');
}
renderTournament();
updateStats();
showToast('🎮 Turnuva başladı!', 'success');
$('#startTournamentBtn').hide();
}
// Turnuvayı sıfırla
function resetTournament() {
if (tournamentMode === 'single') {
singleParticipants = [];
singleTournamentData = [];
singleCurrentRound = 0;
singleTotalRounds = 0;
singleTournamentStartTime = null;
singleTournamentEndTime = null;
singleAdminName = "";
} else {
doubleParticipants = [];
doubleTournamentData = [];
doubleCurrentRound = 0;
doubleTotalRounds = 0;
doubleTournamentStartTime = null;
doubleTournamentEndTime = null;
doubleAdminName = "";
}
// UI sıfırlama
$('#participantList').empty();
$('#tournamentContainer').empty();
$('#tournamentResultsArea').hide();
$('#startTournamentBtn').show();
// Input alanlarını temizle
if (tournamentMode === 'single') {
$('#singlePlayerInput').val('');
$('#adminName').val('');
} else {
$('#playerInput').val('');
$('#doubleAdminName').val('');
}
$('#specialMessage').val('');
// Listeleri ve istatistikleri güncelle
renderParticipantList(tournamentMode);
updateStats();
showToast('🔄 Turnuva sıfırlandı', 'info');
}
// Maç turunu oluştur
function generateRound(players, mode) {
const needed = Math.pow(2, Math.ceil(Math.log2(players.length)));
while (players.length < needed) players.push('Bay');
players = shuffleArray(players);
const round = {
number: mode === 'single' ? singleCurrentRound : doubleCurrentRound,
matches: []
};
for (let i = 0; i < players.length; i += 2) {
round.matches.push({
id: `${mode}-round-${round.number}-match-${i / 2}`,
player1: players[i],
player2: players[i + 1],
winner: null,
});
}
if (mode === 'single') {
singleTournamentData.push(round);
} else {
doubleTournamentData.push(round);
}
}
// Toast mesajı göster
function showToast(message, type = 'info') {
const icons = {
success: '✅',
error: '❌',
warning: '⚠️',
info: 'ℹ️'
};
const toast = $(`
<div class="toast ${type}">
<span class="toast-icon">${icons[type]}</span>
<span class="toast-message">${message}</span>
</div>
`);
$('.toast-container').length || $('body').append('<div class="toast-container"></div>');
$('.toast-container').append(toast);
setTimeout(() => {
toast.animate({ opacity: 0, marginRight: '-100%' }, 300, () => {
toast.remove();
});
}, 3000);
}
// Eşleşme kopyalama fonksiyonu
function copyMatchWithMessage(matchId) {
const match = findMatch(matchId);
if (!match) return;
const specialMessage = $('#specialMessage').val().trim();
const matchText = `${match.player1} VS ${match.player2}\n${specialMessage}`;
navigator.clipboard.writeText(matchText).then(() => {
showToast('✅ Eşleşme kopyalandı!', 'success');
}).catch(() => {
showToast('❌ Kopyalama başarısız!', 'error');
});
}
function findMatch(matchId) {
const tournamentData = tournamentMode === 'single' ? singleTournamentData : doubleTournamentData;
for (const round of tournamentData) {
const match = round.matches.find(m => m.id === matchId);
if (match) return match;
}
return null;
}
function renderTournament() {
const container = $('#tournamentContainer');
container.empty();
const tournamentData = tournamentMode === 'single' ? singleTournamentData : doubleTournamentData;
const currentRound = tournamentMode === 'single' ? singleCurrentRound : doubleCurrentRound;
for (let i = 0; i < tournamentData.length; i++) {
const round = tournamentData[i];
const roundDiv = $(`
<div class="round-container">
<h2><i class="fas fa-trophy"></i> ${round.number}. Tur</h2>
<div class="match-list" id="round-${round.number}-matches"></div>
</div>`);
round.matches.forEach(match => {
const matchCard = $(`
<div class="match-card" id="match-${match.id}">
<div class="player-vs">
<i class="fas fa-${tournamentMode === 'single' ? 'user' : 'users'}"></i> ${match.player1}
</div>
<div class="vs-text-area">
<i class="fas fa-gamepad"></i>
>>>>>VS<<<<<
${$('#specialMessage').val().trim()}
</div>
<div class="player-vs">
<i class="fas fa-${tournamentMode === 'single' ? 'user' : 'users'}"></i> ${match.player2}
</div>
<div class="match-controls">
<select class="winner-select" data-match-id="${match.id}" onchange="setWinner(this)">
<option value="">Kazananı Seç</option>
<option value="${match.player1}">${match.player1}</option>
<option value="${match.player2}">${match.player2}</option>
</select>
<button class="cyber-button copy-match-btn" onclick="copyMatchWithMessage('${match.id}')">
<i class="fas fa-copy"></i> Kopyala
</button>
</div>
</div>
`);
roundDiv.find('.match-list').append(matchCard);
});
container.append(roundDiv);
}
}
// Tournament history
function saveTournamentHistory() {
const mode = tournamentMode;
const tournament = {
id: Date.now(),
mode: mode,
startTime: mode === 'single' ? singleTournamentStartTime : doubleTournamentStartTime,
endTime: mode === 'single' ? singleTournamentEndTime : doubleTournamentEndTime,
champion: $('#tournamentChampion').text(),
participants: mode === 'single' ? [singleParticipants] : [doubleParticipants],
adminName: mode === 'single' ? singleAdminName : doubleAdminName
};
if (mode === 'single') {
singleTournamentHistory.push(tournament);
localStorage.setItem('singleTournamentHistory', JSON.stringify(singleTournamentHistory));
} else {
doubleTournamentHistory.push(tournament);
localStorage.setItem('doubleTournamentHistory', JSON.stringify(doubleTournamentHistory));
}
updateStats();
}
function loadTournamentHistory() {
const singleHistory = localStorage.getItem('singleTournamentHistory');
const doubleHistory = localStorage.getItem('doubleTournamentHistory');
if (singleHistory) {
singleTournamentHistory = JSON.parse(singleHistory);
}
if (doubleHistory) {
doubleTournamentHistory = JSON.parse(doubleHistory);
}
renderTournamentHistory();
updateStats();
}
function renderTournamentHistory() {
const historyList = $('#historyList');
historyList.empty();
const currentHistory = tournamentMode === 'single' ? singleTournamentHistory : doubleTournamentHistory;
currentHistory.reverse().forEach(tournament => {
const historyItem = $(`
<div class="history-item">
<h4>${tournament.mode === 'single' ? 'Tek' : 'Çift'} Katılımcı Turnuvası</h4>
<p><i class="fas fa-trophy"></i> Şampiyon: ${tournament.champion}</p>
<p><i class="fas fa-calendar"></i> Tarih: ${new Date(tournament.startTime).toLocaleDateString()}</p>
<p><i class="fas fa-user"></i> Admin: ${tournament.adminName || 'Belirtilmedi'}</p>
<p><i class="fas fa-users"></i> Katılımcı Sayısı: ${tournament.participants.length}</p>
</div>
`);
historyList.append(historyItem);
});
}
function toggleHistory() {
$('#tournamentHistory').slideToggle();
}
// İstatistikleri güncelle
function updateStats() {
const currentHistory = tournamentMode === 'single' ? singleTournamentHistory : doubleTournamentHistory;
const currentParticipants = tournamentMode === 'single' ? singleParticipants : doubleParticipants;
const currentRound = tournamentMode === 'single' ? singleCurrentRound : doubleCurrentRound;
$('#totalTournaments').text(currentHistory.length);
$('#currentRoundStat').text(currentRound);
$('#totalParticipants').text(currentParticipants.length);
$('#participantCount').text(currentParticipants.length);
updateStatsChart();
}
// When tournament ends
function endTournament(winner) {
const mode = tournamentMode;
if (mode === 'single') {
singleTournamentEndTime = new Date();
} else {
doubleTournamentEndTime = new Date();
}
$('#tournamentChampion').text(winner);
$('#tournamentStatus').text("Tamamlandı");
$('#tournamentEndTime').text((mode === 'single' ? singleTournamentEndTime : doubleTournamentEndTime).toLocaleTimeString());
$('#tournamentDateTime').text((mode === 'single' ? singleTournamentStartTime : doubleTournamentStartTime).toLocaleString());
$('#tournamentAdmin').text(mode === 'single' ? singleAdminName : doubleAdminName);
$('#tournamentResultsArea').show();
addNotification(`Turnuva tamamlandı! Şampiyon: ${winner}`, 'system');
saveTournamentHistory();
updateStats();
}
// Bildirimleri filtrele ve göster
function filterNotifications(filter) {
const notificationList = $('#notificationList');
notificationList.empty();
const filteredNotifications = filter === 'all'
? notifications
: notifications.filter(n => n.type === filter);
filteredNotifications.slice(-5).reverse().forEach(notif => {
const notifDiv = $(`
<div class="notification-item ${notif.type}">
${notif.message}
<span class="notification-time">(${formatTime(notif.timestamp)})</span>
</div>
`);
notificationList.prepend(notifDiv);
});
}
// Yardımcı fonksiyonlar
function formatTime(date) {
return date.toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit' });
}
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// particles.js başlatma kodunu güncelleyelim
function initializeParticles() {
particlesJS('particles-js', {
particles: {
number: {
value: 80,
density: {
enable: true,
value_area: 800
}
},
color: {
value: '#00ff00'
},
shape: {
type: 'circle',
stroke: {
width: 0,
color: '#000000'
},
polygon: {
nb_sides: 5
}
},
opacity: {
value: 0.7,
random: true,
anim: {
enable: true,
speed: 1,
opacity_min: 0.1,
sync: false
}
},
size: {
value: 3,
random: true,
anim: {
enable: false,
speed: 4,
size_min: 0.3,
sync: false
}
},
line_linked: {
enable: false
},
move: {
enable: true,
speed: 1,
direction: 'none',
random: true,
straight: false,
out_mode: 'out',
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: 'canvas',
events: {
onhover: {
enable: true,
mode: 'bubble'
},
onclick: {
enable: true,
mode: 'push'
},
resize: true
},
modes: {
bubble: {
distance: 83.91608391608392,
size: 6,
duration: 1,
opacity: 0.8,
speed: 3
},
push: {
particles_nb: 4
}
}
},
retina_detect: true
});
}
// Add notification function
function addNotification(message, type = 'user') {
const timestamp = new Date();
notifications.push({ message, type, timestamp });
filterNotifications('all'); // Update notifications display
}
function setWinner(selectElement) {
const winner = selectElement.value;
const matchId = selectElement.getAttribute('data-match-id');
const mode = tournamentMode;
const tournamentData = mode === 'single' ? singleTournamentData : doubleTournamentData;
const roundIndex = mode === 'single' ? singleCurrentRound -1 : doubleCurrentRound -1;
const match = tournamentData[roundIndex].matches.find(m => m.id === matchId);
if (roundIndex >= 0 && roundIndex < tournamentData.length) {
const matchIndex = tournamentData[roundIndex].matches.findIndex(m => m.id === matchId);
if (matchIndex !== -1) {
tournamentData[roundIndex].matches[matchIndex].winner = winner;
addNotification(`${match.player1} vs ${match.player2} maçının kazananı: ${winner}`, 'match');
if (checkRoundCompletion(mode)) {
advanceRound(mode);
}
}
}
}
function checkRoundCompletion(mode) {
const tournamentData = mode === 'single' ? singleTournamentData : doubleTournamentData;
const roundIndex = mode === 'single' ? singleCurrentRound - 1 : doubleCurrentRound - 1;
if (roundIndex >= 0 && roundIndex < tournamentData.length) {
return tournamentData[roundIndex].matches.every(m => m.winner);
}
return false;
}
function advanceRound(mode) {
const tournamentData = mode === 'single' ? singleTournamentData : doubleTournamentData;
const winners = tournamentData[mode === 'single' ? singleCurrentRound - 1 : doubleCurrentRound - 1].matches
.map(m => m.winner)
.filter(Boolean)
.filter(w => w !== 'Bay');
if (winners.length <= 1) {
endTournament(winners[0]);
return;
}
if (mode === 'single') {
singleCurrentRound++;
} else {
doubleCurrentRound++;
}
generateRound(winners, mode);
renderTournament();
addNotification(`${tournamentMode === 'single' ? singleCurrentRound : doubleCurrentRound}. Tur başladı!`, 'system');
updateStats();
}
// Katılımcı arama fonksiyonu
function searchParticipants(searchTerm, mode) {
const participants = mode === 'single' ? singleParticipants : doubleParticipants;
const filteredParticipants = participants.filter(p =>
p.toLowerCase().includes(searchTerm.toLowerCase())
);
renderParticipantList(mode, filteredParticipants);
}
// İstatistik grafiği oluşturma
function updateStatsChart() {
const ctx = document.getElementById('statsChart').getContext('2d');
// Mevcut grafik varsa yok et
if (window.statsChart) {
window.statsChart.destroy();
}
const currentParticipants = tournamentMode === 'single' ? singleParticipants : doubleParticipants;
const data = {
labels: ['Toplam Turnuva', 'Aktif Tur', 'Katılımcı Sayısı'],
datasets: [{
label: 'Turnuva İstatistikleri',
data: [
(tournamentMode === 'single' ? singleTournamentHistory : doubleTournamentHistory).length,
tournamentMode === 'single' ? singleCurrentRound : doubleCurrentRound,
currentParticipants.length
],
backgroundColor: [
'rgba(0, 255, 0, 0.2)',
'rgba(0, 191, 255, 0.2)',
'rgba(255, 0, 255, 0.2)'
],
borderColor: [
'rgba(0, 255, 0, 1)',
'rgba(0, 191, 255, 1)',
'rgba(255, 0, 255, 1)'
],
borderWidth: 1
}]
};
window.statsChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
responsive: true,
scales: {
y: {
beginAtZero: true,
grid: {
color: 'rgba(0, 255, 0, 0.1)'
},
ticks: {
color: '#00FF00'
}
},
x: {
grid: {
color: 'rgba(0, 255, 0, 0.1)'
},
ticks: {
color: '#00FF00'
}
}
},
plugins: {
legend: {
labels: {
color: '#00FF00'
}
}
}
}
});
}
// Turnuva verilerini dışa aktarma
function exportTournamentData() {
const exportData = {
tournamentMode,
participants: tournamentMode === 'single' ? singleParticipants : doubleParticipants,
currentRound: tournamentMode === 'single' ? singleCurrentRound : doubleCurrentRound,
tournamentData: tournamentMode === 'single' ? singleTournamentData : doubleTournamentData,
startTime: tournamentMode === 'single' ? singleTournamentStartTime : doubleTournamentStartTime,
endTime: tournamentMode === 'single' ? singleTournamentEndTime : doubleTournamentEndTime,
adminName: tournamentMode === 'single' ? singleAdminName : doubleAdminName,
champion: $('#tournamentChampion').text()
};
const dataStr = JSON.stringify(exportData, null, 2);
const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
const exportFileDefaultName = `tournament_${new Date().toISOString().slice(0,10)}.json`;
const linkElement = document.createElement('a');
linkElement.setAttribute('href', dataUri);
linkElement.setAttribute('download', exportFileDefaultName);
linkElement.click();
showToast('✅ Turnuva verileri dışa aktarıldı!');
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.